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网 站 布局 案例 精粹 


赠送 50 个 网 站 案例 (HTML 模 板 ) 


本 书 配套 的 下 载 资源 文件 中 赠送 了 50 个 网 站 的 HTML 模 板 ， 这 些 模板 的 布局 具有 不 同 的 风格 ， 
美工 朋友 可 以 使 用 这 些 模板 充实 自己 的 资料 库 ， 在 需要 的 时 候 从 中 借鉴 各 种 布局 样式 和 素材 。 


模板 主题 

SEA 女子 会 所 欢乐 西餐 厅 美食 网 站 
奥迪 汽车 婚纱 摄影 女友 花园 网 

奥运 网 站 我 爱 家 居 网 。。 ”有 现 润 地 六 风 于 虽 呈 | 
电子 世界 建筑 师 之 家 01 商用 设备 公司 网 站 01 
蜗 斯 电子 商务 建筑 师 之 家 02 。 ”商用 设备 公司 网 闻 02l 
中 华 儿 童 学 习 网 健康 饮食 网 科技 网 站 

儿童 玩具 网 交通 运输 网 。。” ” ””“” 室内 没 证 而 语 于 呈 | 
中 华 民族 儿童 网 01 东方 教育 新 鲜 水 果 网 

中 华 民族 黑 咖啡 食 店 图 书馆 网 上 
凡客诚 品 科技 公司 网 上 书店 

杨澜 个 人 网 站 朗 图 设计 01 香奈 不 网 aa 
韩国 料理 网 朗 图 设计 02 天 天 影视 网 

月 月 花卉 网 首页 留学 网 音乐 网 
月 月 花卉 网 二 级 页 面 旅游 网 01 中 华 音乐 网 


古 化 石 网 
欢乐 餐厅 


网 律师 网 站 网 上 书店 
冒险 岛 | 
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全 书 网 站 案例 


社区 交友 网 站 
众 星 碧 璨 的 影视 网 站 
美食 资讯 网 站 


宠物 网 站 
温 表 怡 人 的 电影 网 站 


导游 推广 为 一 体 的 海洋 公园 网 站 
” ”主题 明显 的 环保 网 站 
富 教 于 乐 的 博物 馆 网 站 


体现 个 性 的 个 人 网 站 

内 容 丰 富 的 交友 网 站 
” ”酒店 介绍 网 站 

教育 网 站 

旅游 网 站 


电脑 商城 网 站 


“ 提供 30 个 整体 网 站 设计 案例 
" 赠送 50 个 网 站 案例 


的 本 二 


深蓝 色调 的 社区 网 站 
食品 专 类 的 购物 网 站 “到 | 
精 绝 伦 的 视频 展 示 网 站 


包罗 万 象 的 新 闻 门 户 网 站 
医院 网 站 JE 
星光 灿烂 的 娱乐 资讯 网 站 
杂志 网 站 

简洁 的 购物 网 站 


一 [| 资源 义 件 使 用 浊 


美感 是 一 
站 的 第 一 印象 ， 所 以 ， 美 了 
对 于 美 了 


在 本 书 里 ， 您 
小 说 阅读 、 个 人 网 站 、 
局 各 异 ， 而 且 包 含 了 多 种 动态 的 效果 。 

熟 读 唐诗 三 百 首 ， 不 会 作 诗 也 会 吟 ， 当 您 仔细 阅读 过 这 30 个 案例 后 
大 为 拓展 ， 一 方面 能 更 扎实 地 使 用 DIV 和 CSS 这 些 基 本 知识 ， 
， 毕 竟 在 这 30 个 网 站 里 ， 存 在 着 太 多 的 排版 方法 和 动静 搭配 的 方式 ， 当 
其 他 网 站 时 ， 可 以 充分 借鉴 这 种 风格 ， 提 升 网 站 的 美观 程度 。 
， 本 书 还 包含 了 50 个 案例 ， 这 些 案例 是 30 个 案例 的 补充 ， 具 有 很 大 的 重用 性 。 如 果 
您 想 通过 网 络 创业 ， 那 么 ， 这 30 个 网 站 加 50 个 案例 里 ， 或 许 会 有 让 您 创业 的 题材 ， 比 如 其 中 
的 小 说 阅读 网 站 、 购 物 平台 和 资讯 类 网 站 ， 都 能 很 好 地 吸引 点 击 量 。 


如 购物 、 


地 了 解 “ 设 计 


您 在 设计 
此 多 


了 中 


站 的 生命 ， 访 客 大 多 是 根据 页 面 的 布局 和 美观 性 〈 而 不 是 内 容 ) 来 给 出 
[在 网 页 设计 和 开发 的 过 程 中 起 到 了 一 个 不 可 估量 的 作用 。 

[读者 来 说 ， 如 果 很 好 地 掌握 了 DIV 和 CSS， 那 么 就 能 很 快 地 把 自己 的 构思 设计 
成 为 实际 的 网 页 ， 在 掌握 了 一 定 的 网 页 设计 知识 以 后 ， 如 果 美 工 朋 友 还 能 大 量 “ 参 考 优质 
站 ”， 并 从 中 汲取 养分 ， 那 么 就 能 很 快 地 
能 看 到 30 个 网 站 的 范例 ， 这 些 网 站 都 是 经 过 我 们 精心 挑选 ， 其 中 包含 了 诸 
资讯 类 网 站 和 电影 网 站 等 多 种 题材 ， 这 些 网 站 页 面 精美 ， 布 


他 山 之 石 琢 成 一 块 网 


页 的 “美玉 ”。 


后 ， 一 定 会 让 您 的 眼界 


另 一 方面 ， 也 能 让 您 能 更 深刻 


CSS 和 DIV 的 语法 是 比较 丰富 的 ， 但 实用 的 语法 并 不 多 ， 在 本 书 里 ， 并 没有 针对 性 地 讲 
述 语 法 知识 ， 而 是 通过 案例 ， 综 合演 示 “ 语 法 应 用 ”的 效果 。 这 里 ， 大 家 看 不 到 “什么 语法 
人 在 法 是 如 何 应 用 在 案例 中 ”的 这 类 解释 。 


归纳 


a Ne 


Fe 和 了 


ea - 
jp avcrvrcss 月 站 帮 加 出 精 和/ 交 全 灶 


TE 


过 修改 案例 中 部 分 或 整体 ， 开 发 一 个 类 似 的 网 站 或 页 


区 束 


© 0 @ 
泣 洽 注 


从 而 让 您 的 页 面 更 吸引 访问 者 的 眼球 。 
e 当然 最 基本 的 收获 是 ， 您 可 以 更 深刻 地 了 解 DIV 和 CSS。 


本 书 和 当前 市 面 上 的 CSS+DIV 系 列 书 相 比 ， 有 如 下 的 特点 : 


日 。 


| oe ， 把 整体 网 站 通过 修改 内 容 ， 改 编 成 风格 相似 但 主题 不 同 的 网 站 。 
您 能 把 案例 中 的 一 些 动态 效果 〈 比 如 JavaScript 等 ) 通过 改编 ， 放 置 到 您 的 页 面 里 ， 


e 采用 案例 秦 炸 ”的 方式 ， 让 您 在 短 时 间 内 能 了 解 到 各 种 样式 的 网 站 风格 。 
。 每 个 案例 小 而 全 ， 集 DIV+CSS+ 动 态 效 果 为 一 身 ， 所 以 大 家 能 在 一 套 案例 中 学 到 


三 套 知 识 点 的 整合 方式 。 


e 不 再 强调 理论 ， 而 是 强调 ”实战 ， 通 过 那么 多 案例 的 引导 ， 


美工 ， 通 过 学 习 ， 也 能 很 轻松 地 上 手 。 


哪怕 是 刚 入 门 的 新 手 级 


e 只 给 出 并 分 析 最 实用 的 知识 ， 而 帮 您 过 源 掉 一 些 边 边 角 角 的 不 大 实用 的 知识 点 ， 让 您 


在 最 短 的 时 间 内 掌握 最 实用 的 知识 体系 。 


。 在 本 书 的 资源 文件 中 ， 还 有 50 个 中 等 规模 的 案例 ， 这 些 案例 的 布局 是 基于 不 同 种 风格 
的 ， 通 过 这 些 案例 ， 能 让 美工 朋友 很 好 地 充实 自己 的 资料 库 ， 在 需要 的 时 候 从 中 借鉴 


各 种 布局 样式 和 一 些 素材 。 


编写 这 套 素 材 库 的 美工 和 程序 员 均 有 5 年 以 上 工作 经 验 。 他 们 很 了 解 各 位 美工 读者 需要 


什么 ， 可 以 说 是 量 身 定做 了 这 个 包含 30 个 案例 和 50 个 案例 的 素材 库 。 


为 了 让 您 更 有 效 地 从 这 本 书 里 得 到 最 大 的 收获 ， 建 议 您 采用 如 下 的 阅读 方式 : 
第 一 ， 运 行 代码 ， 了 解 一 下 这 个 案例 的 功能 ， 知 道 这 个 案例 中 包含 哪些 亮点 。 


第 二 ， 查 看 资源 文件 ， 深 入 了 解 这 个 案例 的 页 面 构成 和 代码 结构 。 


第 三 ， 阅 读 代码 ， 知 道 代 码 的 整体 布局 ， 并 了 解 感 兴趣 代码 〈 比 如 动态 效果 代码 ) 的 位 


第 四 ， 学 习 整 体 网 站 的 构架 ， 或 者 直接 从 中 取得 感 兴 趣 的 代码 ， 改 编 到 自己 的 网 站 。 
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社区 交友 网 站 


互联 网 拓展 了 人 与 人 之 间 的 关系 ， 当 前 ， 越 来 越 多 的 SNS 系 统 应 运 而 
生 ， 从 而 改变 了 传统 社区 的 交流 方式 。 交 流 类 网 站 由 于 可 以 拓展 人 脉 关系 ， 
当前 非常 走红 。 

本 章 将 给 大 家 介绍 一 个 社区 交友 类 网 站 的 产生 方式 ， 其 中 ， 将 介绍 首 
页 、“ 博 客 ”和 “贺卡 ”三 个 页 面 ， 并 重点 讲解 页 面 框架 和 图 片 这 两 个 重要 
的 页 面 布局 。 


11 网 站 页 面 效果 分 析 


社区 交友 网 站 的 设计 初 京 是 ， 给 更 多 的 用 户 创建 一 个 聊天 、 交 友和 娱乐 的 平台， 所 以 计 
好 的 视觉 效果 和 完善 的 用 户 体验 是 本 网 站 设计 的 关键 。 
国内 的 社区 交友 网 站 多 以 奶 白 背 景色 和 暖 背 景色 加 上 高 亮 文 字 、 图 片 为 主 ， 这 种 经 典 设 
计 ， 已 经 成 为 国内 用 户 的 审美 标准 ， 这 里 我 们 给 大 家 提供 的 案例 是 颜色 艳丽 、 色 彩 鲜明 的 网 
站 ， 相 信 第 一 次 看 到 该 页 面 的 用 户 都 有 眼前 一 亮 的 感觉 ， 源 代码 在 与 本 书 配 套 的 下 载 资 源 的 
源 文件 中 。 


《到 办 首页 效果 分 析 


社区 交友 网 站 的 首页 效果 如 图 1-1 所 示 ， 这 里 采用 了 四 行 的 样式 。 

第 一 行 ， 除 了 Logo 外 还 包含 带 分 页 标签 的 搜索 功能 块 。 第 二 行 ， 显 目地 突出 了 图 片 效果 

的 导航 菜单 ， 这 样 能 使 网 站 看 起 来 别具一格 。 第 三 行 包 括 了 网 站 的 主体 内 容 ， 这 里 采用 了 三 

列 的 样式 ， 其 中 ， 第 一 列 不 仅 提供 了 聊天 软件 下 载 功 能 ， 还 包括 了 登录 模块 。 中 间 列 展示 了 

社区 里 的 各 功能 模块 ， 比 如 圈子 、 语 音 聊天 室 、 电 子 贺卡 、 小 游戏 等 。 右 边 列 有 热门 词 导 航 

等 功能 模块 。 
而 在 页 面 的 最 后 一 行 中 ， 放 置 了 诸如 导航 菜单 和 版 权 信息 等 内 容 。 
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翁 zs 扳 尺 情感 我 的 as 音乐 xx 雪 直 
小 说 学 校 教育 se 生活 品牌 大 富 移 大 ss 


常言 道 :来 说 是 奉 者 ， 必 是 是 替 人。 职场 中 这 样 的 诸 事 八 
封 者 比比 名 是 : 张 三 与 赛 子 … 间 组 

地 客 > 2010-4-20 

作者 新 鲜 人 

在 国内 光 芭 四 时 ,华丽 时 尚 的 精 县 店 的 开业 盛况 之 后 ,对 
于 这 些 商 和 时 尚 领 科 们 应 如 何 措 药 中 国 迅 ， Nor 


创建 一 个 博客 


活跃 的 圈子 


最 新 流行 下 曲 评选 
移出 你 晤 喜爱 的 流行 歌曲 吧 ,评论 你 最 喜爱 的 流行 歌 
曲 。 详细 > 


窒 室 的 生活 
大 学 科室 里 的 多 形 生活 ， 室 友 们 的 青 装 异 服 ， 天马 行 
全 的 生活 悍 … 详 组 ~ 


小 吃 零食 攻略 
看 电影 必 有 的 地 食 ， 出 门 计 尘 绝 对 下 能 村 过 的 小 吃 ， 
) 新 开 的 小 吃 店 在 哪 ?… 谋 弓 


FT 
导航 和 版 权 内 容 交 


图 1-1 首页 的 效果 图 


合作 产道 


《国史 验 博客 页 面 的 效果 分 析 
博客 页 面 同样 为 三 列 布局 ， 如 图 1-2 所 示 ， 左 边 是 ”热门 推荐 区域， 中间 部 分 包含 了 
专栏 作家 、， 搜 索 、 专题 介绍 “、 标 签 和 ”评论 信息 “等 模块 ， 而 最 右 列 放置 了 
登录 “功能 块 。 下 面 将 分 析 这 个 页 面 的 效果 ， 和 首页 完全 相同 的 部 分 我 们 就 不 再 讲述 了 。 


团 


了 代码， 


EI ™ LICIEI EE 
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时 尚 初学 者 的 衬衫 领 对 策 
日 本 品牌 Hare 上 了 春季 的 广告 , 这- 


面 , 下面 有 Hare 的 店 。 
标签 : 豆 基 风采 


Uittle Black D' 


歼 ， 没 有 任何 


热门 标签 


i 时 尚 活动 派 
新 博客 


时 沿 元 素 滥 沪 日 本 吕 罗 


标签 壳 闫 风 采 时 尚 经 奥 小 黑 所 区 尚 


EE 


四 科 后 的 说 笑 
"和 我 们 相遇 i186 天， 我 们 相爱 4464 小 时 ,在 以 后 的 第 477 天 午 ， 请 依 热 … 
发 表 人 - 黑 米 全 小 组 


个 牌子 还 是 很 不 模 的 ， 而 且 今年 继续 之 
前 的 去 年 的 民族 印花 装饰 ， eg 2 此 上 面 也 继续 了 
折 角 裤 的 热天 。 加 果 有 兴趣 可 以 去 看 港 的 太阳 广场 ， 在 新 港 中 心 壳 边 ， 海港 城 对 


pt 更 在 于 在 这 个 祥 华 碟 荣 的 年 代 黑 色 依 

人 旧 骄 做 的 几 立 于 任何 时 尚之 壮 ， 创造 着 一 个 个 经 奥 的 时 尚 故事 。 小 黑 希 一 一 黑色 时 

尚 中 不 得 不 提 的 一 个 永恒 的 经 典 ， 小 黑 初 的 诞生 让 人 们 明白 美丽 可 以 演绎 的 如 此 精 
修饰 的 美好 呈现 的 是 让 人 沉 解 而 不 县 味 的 自 类 和 好 适 。 


ee DIY 学 术 


于 2010.2.15102:46 


图 1-2 博客 页 面 效果 图 


于 网 站 文件 综述 _ 


网 站 文件 包括 页 面 、 样 式 、JavaScript、 
分 别 保存 在 images、css 和 js 目录 里 ， 文 件 及 其 功能 如 表 1-1 所 示 。 


图 


片 等 内 容 ， 其 


Ph 页 面 所 用 到 图 片 、CSS 文 件 和 
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表 1-1 交友 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
index.htm 首页 
页 面 文件 blog.htm 博客 页 面 
piczhan.html 电子 贺卡 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
Images 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


1:2 ”规划 首页 的 布局 


这 个 网 站 的 首页 内 容 比 较 丰富 ， 也 非常 美观 ， 本 节 将 按 次 序 介绍 其 中 重要 DIV 的 构建 
为 


本末 搭建 首页 页 头 的 DIV 
在 这 个 页 头 中 包含 了 两 大 要 素 ， 第 一 是 Logo 图 片 ， 第 二 是 带 导 航 效果 的 搜索 模块 。 在 这 


个 搜索 模块 里 ， 用 户 可 以 通过 切换 ， 分 别 搜索 图 片 或 是 视频 ” 内容。 这 部 分 的 效果 如 


图 1-3 所 示 。 


网 


图 1-3 页 头 DIV 的 效果 


下 面 是 页 头 DIV 的 关键 代码 。 


1. <dqiv class="h"> 

这 <div class="h1"> 

3 <! Logo 图 片 --> 

4 <div class="h1-1"> 

5 <img src="img/logo.gif" width="157" height="76" border="0" alt=""> 
6 </div> 

<! ”定义 带 导航 效果 的 搜索 模块 --> 

8 <div id="search banner"> 

号 区 <div class="nsb" id="nsb"> 

10. <div class="nsb-1" id="top links"> 

Ph <div class="nsb-1-1s" id="web"> 网 站 </div> 
12 省 略 其 他 导航 内 容 


3- </div> 
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14. </div> 

Ss <! 搜索 按钮 --> 

16 <div class="nsb-2-2"> 

LE <input type="button" id="sub btn" value="" class="nsb-2-2-b"/> 
18. </div> 


19. 省 略 其 他 次 要 代码 
200 "</div> 
21. </div> 


在 上 述 代码 的 第 3~5 行 里 ， 定 义 了 本 页 面 的 Logo 图 片 ， 从 第 8~14 行 里 ， 定 义 了 搜索 部 
分 的 导航 菜单 ， 而 在 第 17 行 ， 用 图 片 的 形式 定义 了 搜索 按钮 ， 这 个 搜索 按钮 包含 了 名 字 为 
nsb-2-2-b 的 CSS， 这 个 CSS 定 义 了 搜索 按钮 的 宽度 、 高 度 、 背 景 图 片 等 属性 ， 关 键 代 码 如 下 


所 示 。 
.Sb=2=22D 
7 background:url( ../img/button.gif ) no-repeat; // 定 义 按钮 的 背景 图 片 
3 width:99px; // 定 义 宽度 
1 height:32px; // 定 义 高 度 
5 line-height:32px; ”// 定 义 行 高 
6 border:0px; // 定 义 边框 
沁 margin:0px; // 定 义 外 边 距 
8 
Sh, 

菜单 癌 DIV 


导航 菜单 部 分 可 以 说 是 本 网 站 的 特色 ， 这 些 导 航 菜单 不 仅 排列 精致 ， 而 且 色 彩 精美 ， 显 
示 效 果 如 图 1-4 所 示 。 


图 1-4 导航 菜单 的 DIV 效果 图 


导航 菜单 的 关键 代码 如 下 所 示 ， 其 中 ， 从 第 4~8 行 的 代码 中 定义 了 一 个 父 菜单 ， 而 从 第 
15~17 行 ， 用 图 片 的 方式 显示 出 了 子 菜单 。 


<div class="h2"> 
<div class="bud"> 
<ul> 

<1i id="menuItem0" class="main 1i" style="margin-top:-10px; "> 

<ahref="index.html" class="main 1i link"id="link menuItem0"> 
首页 

</a> 

</1i> 

<1i id="menuIteml" class="main li"> 
<ahref="blogs.html" class="main 1i link" id="link menuIteml"> 


软件 下 载 


FFPeoomowamnum 必 wm 


Po 
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区 </a> 

13 <ul id="ul sub menul" class="ul sub menu"> 

14. <! 这 里 是 子 菜单 -==> 

5 <div class="l1i sub menu-d-img"> 

16. <img src="img/template/arrow.gif" width="13" height="11" 
border="0" class="sub menu img"> 

世 既 </div> 

18. </ul> 

19. 省 略 其 他 菜单 效果 的 代码 

20 . </ul> 

ls </div> 

22. </div> 


天 对 搭建 首页 主体 部 分 最 左 列 的 DIV 


的 效果 如 图 


在 首页 主体 部 分 中 ， 最 左 列 放 置 了 软件 下 载 和 
登录 等 模块 ， 它 们 的 样式 放 在 一 个 DIV 里 ， 这 部 分 We 
1-5 所 示 。 六 二 © 


关键 代码 如 下 所 示 ， 画 面 虽然 复杂 ， 大 部 分 都 是 图 


片 和 文字 的 


| 


2 <div class 


3 
4. 
Si 
6. 
的 
8 
95 
0s 


堆砌 ， 所 以 这 里 不 做 详细 描述 。 


ivclass="d-main"> 


ee 
[3 


<div class= 
<div class -top-1"> 
<div class="dl def" id="dl-m"> 
<div class="dl1 def0"> 
<div class="d] def0-2" id="dl-btn"> 
<! 定义 聊天 软件 部 分 的 图 片 --> 
<divclass="dl_def1-1"> 
<a href="#"><img width="191" height="114" border=" 


出 


1-5 主体 部 分 最 左 列 DIV 效 果 


" src="img/ 


download 65 generic.gif"/></a> 


LL 
1 
1 用 局 
14. 
出 Se 
Vee 
Ts 


</div> 
</div> 
</div> 
<div class="dl1 defl"> 
<diveclass="dl defl 20" id="dl pr"> 
<! 用 图 片 的 方式 定义 最 新 手机 版 的 菜单 --> 


<div id="icq togo”" class="dl def1 2-1"><a href="#"><img 


width="170" height="28" border="0" src="img/dl 2go.gif"/></a></div> 


LE 后 
95 
20 . 
4 
攻克 
23. 
24. 
29- 
26 


省 略 其 他 的 菜单 
</div> 
</div> 
</div> 
</div> 
<div class="d-top-2" id="browser"> 
<! 定义 登录 部 分 模块 --> 
<div class="d07-2-2"><a target=" top" href="#"> 
<img src="img/1og_ in.gif" width="133" height="37" border="0"></a> 
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六 <p>&nbsp; gnbsp; 快 快 登入 ， 找 人 聊天 </p> 

28. </div> 

2 </div> 

30E <div class="d-top-3"><a href="#"><img src="img/safety.gif" width="95" 


height="95" border="0" alt=" 搜 索 好 友 " ></a></div> 


31. </div> 


公允 搭建 ”你 的 圈子 ”部 分 的 DIV 


在 首页 中 ， 有 很 多 


天 室 等 ， 这 些 功 能 模块 的 样式 非常 相似 ， 都 是 采用 ”标题 加 图 


功能 模块 ， 比 如 ”你 的 圈子 和 语音 


片 加 文字 的 效果 。 下 


类 功能 模块 的 构造 方式 ， 这 部 分 的 效果 如 图 1-6 所 示 。 
这 部 分 的 关键 代码 如 下 所 示 ， 其 中 第 5 行 里 展示 了 标题 性 文 


字 ， 在 第 8~10 行 里 ， 放 


就 通过 你 的 圈子 ”这 个 模块 来 分 析 这 


置 了 图 片 ， 而 在 第 11~14 行 里 ， 放 置 了 针对 


这 个 功能 模块 的 文字 描述 。 人 
1. <div class="gr" id="gr div"> 
2 省 略 次 要 代码 
3 <div class="seperator"> 
4. <h4 class="title"><a href="#" title=""> 
5 <span id="icq_grp"> 你 的 圈子 </span></a> 
6 </h4> 
a < 图 三 > 
8. <div class="picture"> <a href="#" title=""> 
9. <img width="158" height="98" src="img/ICQ7Group.jpg"/></a> 
UU </div> 
A <pclass="p title"><a href="#" title=""> 你 的 圈子 </a></p> 
FE <p class="p_content"><a href="#" title=""> 
3 建立 或 者 加 入 圈子 ， 聊 聊 共同 的 话题 </a></p> 
14. </div> 


ss /dy 


16. <divclass="main gr" id="group more"> 


9 <span class="1link more"><a href="#"><span> 更 多 圈子 
由 后 </span></a></span> 
19. </div> 


请 注意 ， 在 第 3 行 


Ph， 通 过 seperator 这 个 CSS 来 控制 整个 模块 的 风格 ， 这 部 分 的 代码 如 下 


所 示 ， 它 指定 了 整个 DIV 的 宽度 、 左 内 边 距 和 悬浮 方式 。 


.Seperator { 


width:181px; // 宽 度 


float:left; // 定 义 悬 浮 方式 


于 
2 

< 六 padding-left:14px; ”// 定 义 左 内 边 距 
4 

5 
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急于 对 撕 建 ”最 近 博客 文章 ”部 分 的 DIV 


最 新 博客 文章 在 这 个 交友 社区 里 ， 会 员 写 的 博客 总 想 在 


博客 > 别 拓 职场 中 最 让 人 生 拓 的 10 类 人 第 一 时 间 内 和 别人 分 享 ， 所 以 在 首页 中 ， 需 要 
和 有 人 5 人 用 一 个 DIV 来 包含 “最 近 博客 文章 ”部 分 的 内 


来 说 是 丰 : 
ei 张 三 与 妻子 


a 容 。 这 部 分 的 效果 如 图 1-7 所 示 ， 它 使 用 了 一 个 

人 华丽 时 沿 的 精 吕 店 的 开业 吉之 后 ,对 大 的 DIV 嵌 套 诸多 小 DIV 的 样式 。 

关键 代码 如 下 所 示 ， 其 中 ， 在 第 12 行 里 ， 

定义 了 博 主 的 头像 ， 在 第 16 行 ， 定 义 了 博客 的 

图 1-7 最 新 博客 文章 部 分 DIV 效果 图 标题 ， 在 第 19 和 20 行 ， 显 示 了 作者 名 称 ， 而 在 
第 21 行 ， 定 义 了 博客 的 内 容 。 


创建 一 个 博客 


I <dlvelass="dl 2>125"> 

p< <div class="rc-b"> 

3 <div class="rc-b0">gnbsp; </div> 

4. <div class="rc-b-sp-3">gnbsp;</div> 

5 <h3 class="rc-bl"><span id="r_blg"> 最 新 博客 文章 </span></h3> 
6 <div class="rc-b2"> 
站 <div class="rc-b2-1"> 
8 


<div> 
9. <div class="rc-b2-1-p"> 
UO <div class="rc-b2-1-pl"> <a href="#"> 
天 于 <! 定义 博 主 的 头像 --> 
3 <img src="img/show_photo..jpg" width="46" height="57" border="0"> 
EE </a> 
ER </div> 
ES <div class="rc-b2-1-p2"> 
16- <a href="#" class="rc-more" ><b> 博 客 </b></a> > 
LE <a href="#" class="rc-more"><b> 
18. 别 做 职场 中 最 让 人 生 厌 的 10 类 人 </b></a><br> 
95 <a href="#"> 作 者 </a> <a href="#"><b> 
20. 嘉 新 人 </b></a><br> 
I <a href="#"> 省 略 博客 内 容 块 </a> </div> 
2 </div> 
3 省 略 其 他 博客 文章 
24. </div> 
Sb </dlyy 
26. </div> 


请 注意 在 这 个 模块 的 上 方 ， 有 一 个 长 条 的 颜色 块 ， 这 个 效果 是 通过 第 3 行 引 入 CSS 来 实现 


的 ，CSS 部 分 的 关键 代码 如 下 所 示 。 
EE re=bOT 
芝 height: 9px; // 定 义 高 度 
所 line-height: 9px; // 定 义 行 高 
4 background: #B030D1; // 定 义 背景 色 
5- } 


而 在 代码 的 第 10 行 中 ， 引 入 了 名 为 rc-b2-1-p1 的 样式 ， 这 个 样式 针对 DIV 和 图 片 都 有 效 。 
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Eb -Ee b2 1 BL 

2 float: left; 

了 width: 60px; 
4 height:70px; 
加 padding-left: 15px; 
6. 1} 

7. .rc-b2-1-pl img { // 针 对 图 片 的 

3 margin-top:2px; // 顶 部 的 定义 外 边 距 


人 @EE 熏 搭建 页 脚 部 分 的 DIV 
这 个 网 站 的 页 脚 部 分 比较 传统 ， 它 包含 了 导航 和 版 权 的 信息 ， 如 图 1-8 所 示 。 


关于 我 们 | 联系 我 们 | 网 站 帮助 | 网 站 地 图 | 法 律 条 款 | 合作 渠道 
520052010 区 有 了 保留 一切 权 利 
i 版 权 信息 


图 1-8 页 脚 部 分 的 DIV 


9. Ravwan 


页 脚 部 分 的 关键 代码 如 下 所 示 ， 这 部 分 的 代码 比较 简单 ， 所 以 就 不 再 展开 说 明了 。 


1. <divclass="f"> 

2 <div class="f-lnk-d"> 

3 <a href="#" class="f-lnk"> 关 于 我 们 </a> 

A <! 省 略 其 他 部 分 的 导航 信息 --> 

5 <span class="f-end">&copy;2005-2010 交友 网 .保留 一 切 权 利 </ span> 
6 </div> 
1 </div> 


于 大 首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 
首页 中 其 他 值得 注意 的 CSS 的 效果 ， 如 表 1-2 所 示 。 


表 1-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div class="dl_| 定 义 此 DIV 里 的 背景 色 、 宽 度 、 高 度 等 样式 
defl-1"> .dl_defl-1 { 


position:relative; 


right:21px; 
width:114px; 
height:114px:; 
background:#F8511C: 


6 定义 这 个 DIV 的 
2 背景 色 等 样式 
— © 
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DIV 代 码 CSS 描 述 和 关键 代码 
<div> <a href="#" | 定义 文字 的 大 小 
font-size:14px; ;本 小 说 学 校 教育 sn 生活 品牌 大 富 移 二 = 
勿 炼 情感 我 的 as 音乐 #x a 小 说 学 校 
} ;教育 ss 生活 品牌 大 富翁 三 
<div class="d1-2"> 定义 整个 DIV 的 宽度 、 高 度 和 项 部 外 边 距 
.dl-2{ 
width:760px; 
和 针对 整个 DIV， 所 以 效果 不 再 给 出 
height:210px; 
margin-top:10px; 


全 3 ”电子 贺卡 页 面 


在 电子 贺卡 页 面 中 ， 将 放置 ”贺卡 列表 、 菜单 导航 等 内 容 。 本 节 我 们 就 来 分 析 一 
下 其 中 重要 DIV 的 实现 方式 。 


《下 到 天 导航 列表 部 分 的 DIV 


在 导航 列表 部 分 中 ， 用 图 片 加 文字 的 方式 ， 简 捷 地 
介绍 贺卡 的 分 类 信息 ， 如 图 1-9 所 示 。 

这 部 分 的 关键 代码 如 下 所 示 ， 用 ul 和 1i 生 成 分 类 列 
表 ， 从 第 6 行 代码 中 可 以 看 到 li 标签 嵌 套 了 ul， 这 个 ul 就 是 
Ee 


1. <divclass="cat-nav-2"> 

2 <ul id="Left menu"> 

SE <li class="cCat nav 2=1-on" id="sel 
cat" title="Go to Main category"><a href="#" 
class="on" title=""> 全 部 贺卡 </a></1i> 


网 


1-9 作家 介绍 部 分 的 DIV 


4. <li class="cat-nav-2-sp">&nbsp;</1i> 
Se <li class="cat-nav-2-3">&nbsp;</1i> 
机 < chass="cat nav 2 1" Ld "top lS><ahref="#" class="" td=" ne" 


title=""> 爱 情 类 </a> <span id="1 img" ><img src="img/nav_ arr down.gif" border="0" 
width="1l"height="1ii"alt="" title=""onclick="open sib cat("1')a"></span> 


7 <ul style="display:none;" id="1"> // 子 菜单 内 部 添加 一 个 ul 列表 
: <lLi class="cat-nav-2-sp">&nbsp;</1i> 
9. <! 子 列表 略 内 容 略 -> 


10 
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LO05 <1i class="cat-nav-2-arr"><img src="img/close chr.gif" border="0" 
width="8" height="8" alt="" title="Close 'Holidays' category" onClick="open sub_ 
避 妆 和 


11。 </ul> 

25 </1i> 

L138 </1i> 

1L4. <li class="cat-nav-2-3">&nbsp;</1i> 

Ws <li class="cat-nav-2-1"><a href="#" class="" title=""> 问 候 类 </a></1i> 
6s </ul> 

Lv 


人 本 到 答 炎 卡 目录 部 分 的 DIV 
贺卡 目录 部 分 将 显示 精 选 贺卡 列表 ， 这 部 分 的 文字 排列 整齐 ， 效 果 如 图 1-10 所 示 。 


| 贺卡 列表 
排序 方式 评分 


列 


1-10 贺卡 列表 部 分 的 DIV 展示 


这 里 只 列 出 一 个 贺卡 项 ， 代 码 如 下 所 示 。 从 代码 上 我 们 很 容易 看 出 它 是 由 li 组 成 ， 并 且 
里 面 的 评论 图 片 也 是 由 嵌 套 ul 和 li 组 成 。 每 个 贺卡 项 上 由 4 行 : 所 属 类 别 、 标 题 、 图 片 和 评 
分 图 片 组 成 ， 这 种 由 上 自 下 的 方式 ， 对 样式 布局 没有 太 大 的 难度 ， 设 计时 没有 使 用 太 多 的 
margin 和 padding， 不 需要 额外 代码 区 支持 跨 浏览 器 。 另 外 ， 第 7-15 行 代码 ul， 我 们 可 以 用 单 
张 图 片 蔡 代 ， 如 图 1-10 所 示 ， 单 个 项 评分 5 颗 星 ， 将 其 单独 做 成 图 片 取 名 level15， 让 页 面 开 发 
工程 师 用 程序 去 判断 src 加 载 的 图 片 名 称 。 这 样 写 单个 项 至 少 可 以 节省 5 行 代 码 。 


QDvicss masons #2) rr-r-r-r- Sx__【L_ Lu,| OO 


Ep <ul class="d2=0l=1"> 

<1i class="1i-link" style="width:180px;"> <a href="#" title=""> 节 日 类 </ 
a> &gt; <ahref="#" title=""> 情 人 节 </a> </1i> 

二 <1i> <div class="d-spvh-5">gnbsp; </div> </1i> 

4. <1Li class="]1i-title"><a href="#" title=""> 爱 情 鸟 </a></1i> 

<1Li><divclass="d-spvh-5">&nbsp;</div> </1i> 

6. <1i class="1i-img-0"><a href="#" title=""><img src="img/001.jpg" 
height="118" width="168" /></a></1i> 

Ts <li class="1i-comment"> <!--// 五 颗 星 的 图 


8- <span class="no-font"><a href="#" title=""> 

a <img src="img/star full.gif" border="0" width="10" height="9"> 
Ls <img src="img/star full.gif" border="0" widt 10" height="9"> 
els <img src="img/star full.gif" border="0" width="10" height="9"> 
2 <img src="img/star full.gif" border="0" width="10" height="9"> 


5 <img src="img/star full.gif" border="0" width="10" height="9"> </a> 
14. </span> 

3 </1i> 

16. </ul> 

A 


人 


众 星 璀璨 的 影视 网 站 


电影 是 当前 比较 流行 的 一 种 娱乐 方式 ， 而 一 些 巨星 云集 的 大 片 ， 更 能 带 
给 人 们 以 视觉 上 的 盛宴 。 

最 近 有 什么 大 片 ， 这 些 大 片 有 哪些 明星 ， 诸 如 此 类 的 问题 一 直 是 电影 
爱好 者 们 关心 的 问题 。 在 这 个 章节 里 ， 我 们 将 介绍 一 个 电影 题材 的 展示 类 网 
站 ， 其 中 将 包含 首页 、“ 热 门 分 类 电影 ”和 “热门 电影 介绍 ”三 大 页 面 ， 从 
中 大 家 能 了 解 信息 展示 类 网 站 的 风格 和 开发 方式 。 


2.1 网 站 页 面 效果 分 析 


这 个 网 站 的 特色 是 ” 精 而 全 ， 不 仅 需 要 用 精美 的 图 片 来 吸引 访问 者 的 眼球 ， 而 且 还 要 
足够 多 的 电影 资讯 来 吸引 住 长 期 访客 。 
本 章 将 着 重 分 析 首 页 和 ”电影 分 类 ”页面 的 设计 样式 ， 而 ”电影 介绍 ”页面 ， 虽 然 也 比 

较 精 美 ， 但 它 的 设计 风格 和 开发 方式 与 前 两 个 页 面 非常 相似 ， 所 以 就 不 作 介 绍 了 。 


CW 和 半 首页 效果 分 析 


这 个 影视 网 站 的 首页 篇 幅 比较 长 ， 我 们 把 它 分 为 三 个 图 共 六 行 ” 的 样式 来 说 明 。 如 图 2-1 
所 示 ， 在 第 一 行 里 ， 放 置 着 包括 Logo 图 片 和 ”导航 部 分 “的 页 头 部 分 ， 第 二 行 里 放置 着 ”电影 
搜索 ”功能 模块 ， 第 三 行 里 放置 的 页 面 的 导航 菜单 ， 通 过 这 个 用 户 能 链接 到 ”最 新 大 片 和 电 
影 时 刻 表 ”部 分 的 页 面 。 第 四 行 是 首页 的 主体 部 分 ， 包 括 电 影 介 绍 和 电影 新 闻 等 部 分 ， 如 图 2-2 
所 示 。 第 五 行 里 仍然 放置 ”电影 搜索 模块 ， 这 个 模块 在 首页 中 是 第 二 次 出 现 ， 原 因 是 页 再 


Er 


电视 | 音乐 广播 | 电影 


= 
首页 电影 时 刻 表 EE *=1 最 新 DVD 。 所 有 电影 ”关于 我 们 。 最 新 新 闻 


图 2-1 首页 前 三 行 的 效果 


[网 


QQ、|DIV+CSS 到 台布 局 案 全 精粹 (第 2 版 ) 


长 ， 方 便 用 户 不 论 访问 到 哪里 ， 都 
能 搜索 自己 喜欢 的 电影 。 而 最 后 
行 是 页 脚 部 分 ， 放 置 导航 和 版 权 声 
明 信 息 ， 如 图 2-3 所 示 。 


Eb 


pmpmree en, mers ee 
een 


Mr | 
rr pore 站 

调 2=” 

园 := 和 

铝 二 ”= 
图 2-2 第 四 行 主体 部 分 的 效果 
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第 2 章 。 众 星 璀 璨 的 影视 网 


站 


影 分 类 页 面 的 效果 分 析 


在 电影 分 类 页 面 中 ， 不 仅 提供 了 导航 菜单 ， 而 且 放 置 了 大 量 的 电影 图 片 。 页 头 和 页 脚 部 


分 和 首页 非常 相似 ， 而 主体 部 分 分 成 三 列 ， 大 致 的 效果 如 图 2-4 所 示 。 


阿 几 达 -更 多 介绍 
二 为 六 人 该 请 未 的 ， 本 


动作 上 
科幻 片 


办 
二 和 二 同 只 太 基因 相 周 ”这 下 
叭 一 能 控制 这 个 阿 几 达 的 


妇 清 
正在 热 映 
《4 起火 风 导 》 


月 光 宝 全 


常 金 杀手 


加 0 茜 )》 


月 光 宝 全 南极 村 理 
全 星 苦于 下 摘 喜 剧 日 本 南 概 生 活 实况 
点 评 | 矣 点 评 | 揪 


匿名 种 窜 


和 各 的 


查看 全 部 评论 > 


Sn 


党 全 路 手 信 万 记 
美国 虹 新 受 情 喜 出 阿 县 达 忧伤 态 情 片 北美 束 房 冠军 大 片 


点 评 “播放 


月 光宇 全 


营 全 猎手 


点 评 | 竹 训 页 评 | 揪 


《情人 眼 里 出 西施 》 
人 火 风 耶 
徘 亚 之 吉 
《人间 色相 


全 卡 闭 期 


但 卡 多 
晤 新 火爆 动作 
点 评 播放 


网 
[ 
~ 

束 

中 

闫 

当 

不 

洲 

汀 
网 
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《民生 网 站 文件 综述 


这 个 页 面 的 文件 部 分 比较 传统 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 片 、 
CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 2-1 所 示 。 
表 2-1 电影 网 站 文件 和 目录 一 览 表 

模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 

dvd.html 电影 分 类 的 页 面 

events.html 描述 具体 电影 的 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


2.2 ”规划 首页 的 布局 


首页 中 的 内 容 是 比较 复杂 的 ， 我 们 把 它 分 成 几 个 部 分 ， 分 析 一 下 首页 中 诸多 重要 DIV 的 
设计 方式 。 


《天 搭建 首页 页 头 的 DIV 


首页 的 页 头 部 分 ， 包 含 了 Logo 图 片 、 导 航 菜单 和 ”登录 和 注册 模块 ”三 部 分 内 容 ， 样 式 
如 图 2-5 所 示 。 


图 2-5 首页 页 头 的 DIV 设计 分 析 图 


实现 页 头 部 分 的 关键 代码 如 下 所 示 ， 在 第 4 行 中 ， 定 义 了 首页 中 标题 性 文字 的 代码 ， 这 
可 以 放 Logo 图 片 也 可 以 放 广告 ， 从 第 10~14 行 ， 定 义 了 导航 部 分 的 菜单 ， 而 在 第 16~18 行 
旺 ， 定 义 了 注册 和 登录 功能 模块 。 


hn 


于 <div id="adheader"> 

2 <table class="ad"> 

3 <! 标志 性 图 片 --> 

4 <tr><td><img src="image/72890.jpg" /></td></tr> 
与 </table> 


第 2 章 “ 众 星 丙 琛 的 影视 网 站 


6 </div> 

7. <! 开始 定义 菜单 --> 

8. <divclass="headTop"> 
9 <div id="channels"> 


10. <div class="channelsLink"> 

EE <a href="#"> 电 视 </a> | <a href="#"> 

2 音乐 </a> | <a href="#"> 广 播 </a> 

到 省 略 ”电影 菜单 以 及 子 菜单 "的 编码 

14. </div> 

EE <div class="userZip userZipLong"> 

16. <div class="userInfo "> 

D7 <a href="#"/> 登 录 / 注 册 </a> 

多 </div> 

D9 <div class="headZzip"> 

2 <! 搜索 电影 模块 --> 

2 <form name="locForm" onsubmit="JavaScript:onSubmitLocationSear 
ch();"> 

2 <input name="location" type="text" class="srchtix" id="locSearch" 


onfocus="if (this.value==' 请 输入 ')this.value="'';" 


35 onblur: f(this.value=='')this.value=' 请 输入 ';" value=" 请 输入 " /> 
24. <ahref="#" id="submit" class="submit"> 

2 </a> 

26> <input type="hidden" name="showBorderOption" value="true" /> 

2 </form> 

28. </div> 

29. </div> 


CEM 撕 建 ”最 新 电影 ”部 分 的 DIV 


影视 网 站 的 首页 需要 图 文 并 茂 ， 所 以 在 首页 的 显眼 位 置 ， 采 用 了 导航 加 文字 加 图 片 的 方 
式 ， 构建 了 最 新 电影 ”部 分 的 DIV， 这 部 分 的 效果 如 图 2-6 所 示 。 


DvD 新品 上 架 2 医 一 癌 (j 图 图 


(We | 


更 多 景 新 电影 


四 
出 


2-6 最 新 电影 部 分 的 DIV 效 果 


下 面 我 们 来 分 析 一 下 这 个 DIV， 关 键 代码 如 下 所 示 ， 其 中 在 第 2~7 行 里 ， 用 ul 和 li 的 方 
式 ， 定 义 了 左边 ”导航 菜单 ”部 分 的 样式 ， 在 从 第 8~24 行 里 ， 定 义 了 右边 ”最 新 电影 部 分 
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1. <! 导航 菜单 部 分 的 DIV--> 


2. <div id="topFiveNav"> 


3 <ul class="topfivenav"> 

4. <1i id="inTheatersNav" class="selected"><a href="#"> 最 新 电影 </a></1i> 
5 <! 省 略 其 他 部 分 的 导航 菜单 --> 

6- </ul> 

7 </div> 

8. <div id="topFive"> 

9 <div class="top5container top5mov"> 

10. <div class="dimsPoster"> 

ls <a id="movieLink21411" href="#" 

125 onclick="s objectID="MES-IT -Posterl's"> 

3 <img width="90" height="133" src="image/21411 p m.jpg" /> 
14. </a> 

I <div class="movietitle"> 

16. <a id="movieLinkTitle21411" href="#" > 迷失 世界 

i </a> 

DO </div> 

35 <div class="movielinks"> <a href="#" class="movieShow" 

20. id="movieSshowtimesLink21411";"> 订 票 </a> 

Ze <aid="movieTrailerLink21411" class="movieTrailer" href="#" 
2 onclick="s_objectID="'MF5-IT-Trailerl';"> 预 告 片 </a> 

2 </div> 

24. </div> 

25. 省略 其 他 电影 描述 编码 

26. </div> 


请 注意 这 里 的 第 2 行 ， 引 入 了 ID 为 topFiveNav 的 CSS， 用 来 设置 左边 导航 部 分 的 文字 ， 这 
部 分 的 关键 代码 如 下 所 示 ， 这 个 CSS 还 作用 到 了 ul 和 1i 这 两 个 html 元 素 上 。 


1. #topFiveNav{ 

2 background:#fff url(../image/mf main top51ogo3.gif) no-repeat 0 0; /x* 背 
景 图 */ 

3 width:135px; /* 宽 度 */ 

4. ”float:left; /* 设 置 靠 左 悬浮 标志 */ 

5. padding-top:50px; /* 设 置顶 部 的 内 边 距 */ 

Ge 

7. #topFiveNavul 1it 

8. height:15px; 

9. padding:5px; 

YOay 

11. #topFiveNav ul liat 

12. display:block; 

13 Vidths120pxs 

14.} 


下 对 搭建 ”最 新 电影 新 闻 “部 分 的 DIV 


首页 中 不 仅 需要 放置 最 新 电影 ， 还 要 放置 最 新 的 电影 新 闻 ， 这 部 分 的 篇 幅 比较 大 ， 大 致 
的 效果 如 图 2-7 所 示 。 
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il 第 2 章 众 旺 于 下 的 影视 网 站 


最 新 电影 新 闻 目 [ET 
全 部 新 闻 阅 新 闻 


《 诸 神 之 战 》 内 地 破 亿 五 一 长 假 前 的 小 低潮 
9.07:17 一 2010-4-27 一 查看 :全 广 


本 周 市 场 比较 平 小， 随 着 新 片 不 断 上 映 ，3 月 底 4 月 初 上 映 的 大 量 影片 开始 逐渐 淡出 人 们 视野 ， 近 期 影院 主导 上 映 影 片 基 
本 上 都 是 《 诸 神 之 战 》、【《 杜 拉 拉 》 和 《东风 雨 》， 虽 然 这 三 部 影片 在 不 同 观 影 人 群 中 都 是 训 几 不 一 ， 但 市 场 容量 并 没有 
编 碱 ， 而 且 本 周三 是 国家 京 蛋 日 ， 所 有 影片 停 映 一 天 ， 周 票房 依 然 可 以 保持 在 1.3 亿 左右 的 高位 ， 看 祥子 ，2010 年 的 单 周 
票房 轻易 不 会 跌 破 亿 元 水 平 线 了 。 二 止 4 月 25 日 ，2010 年 黑 计 票房 已 经 突 碘 了 32 亿 ， 巾 此 鸥 势 ，2010 年 上 半年 的 标 
房 必 将 超过 45 亿 ， 能 否 做 允 [ 更 高 ， 就 看 5 月 、6 月 的 票房 表现 了 。 截 止 4 月 25 日 ， 本 月 的 票房 已 经 达到 5 3 亿 ， 照 此 趋势 ， 
本 月 最 终 票房 在 6 亿 左右 。 


赵 葆 华 : 不 能 接受 批评 是 不 自信 的 表现 
9:23:45 一 2010-4-27 一 查看 :全 文 


赵 葆 华 称 ， 好 对 《无 人 区 》 的 观点 并 不 是 针对 这 一 部 片子 ， 而 是 对 当下 青年 导演 的 创作 提出 意见 ， 设 想到 在 网 上 引 来 铺 天 
甘地 的 “图 册 ”。 虽 类 目前 届 已 经 把 自己 博客 上 与 此 事 有 关 的 文章 都 删除 了 ， 但 起 葆 华表 示 ,不 能 接受 批评 是 不 自信 的 表 


《 赵 氏 孤儿 》 和 象山 开 城 仪式 票房 直 指 5 亿 元 
8:08:42 一 2010-4-27 一 查看 :全 六 
“神秘 ”， 但 经 过 几 年 华语 大 片 的 洗礼 ， 如 今 大 导演 们 开拍 新 片 也 僵 得 变通 与 媒体 沟通 的 方式 。 张 


大 导演 拍 所 新 片 总 爱 玩 
艺 课 的 新 片 《 山 植树 之 态 》 A 提供 简单 的 拍摄 进度 报告 。 而 陈 遍 歌 新 片 《 起 氏 孤 儿 》 却 是 在 每 一 次 
苇 换 外 最 地 之 后 ， 都 逆 请 媒体 进行 实地 探班 


《实习 医生 格 普 》 季 终 拍摄 巨大 灾难 降临 医院 


10:34:30 一 2010-4-27 一 查看 -全文 


据悉 ， 第 六 季 最 后 一 集 特 以 2 小 时 联播 形式 播 出 ， 第 一 部 分 中 ， 西 缆 图 医院 格 会 发 生 巨 大 的 灾难 ， 让 所 有 人 陷入 惊慌 ， 而 
第 二 部 分 Meredith Grey 和 Cristina Yang 的 医术 梅 会 面 临 巨大 挑战 : 不 得 不 怀 虱 ,时 下 流行 第 色 死亡 的 美剧 ,是 不 是 格 祸 
害 到 医院 中 某 个 角色 了 。。“ 


《探索 者 传说 ) 凶 多 吉 少 ABC 磨 刀 悉 玲 向 此 剧 


09:09:09 一 2010-4-27 一 查看 ;全文 


据 内 部 消息 称 ,这 部 由 畅销 小 说 改编 的 剧 集 收视 平平 ，ABC 电 视 台 企图 把 它 卖 疆 更 小 的 电视 台 播放 ， 因 为 剧 集 质量 上 乘 ， 
不 过 不 小 的 收购 资金 让 很 多 电视 台 都 望而却步 ,ABC 电视 台 不 得 不 怒 痛 草 爱 ， 砍 摘 剧 集 。 《探索 者 传说 )》 从 
2008 年 11 月 份 开始 播 出 ， 看 来 坚持 元 2010 年 5 月 ， 这 部 剧 集 很 有 可 能 要 洁 别 我 们 7 。 


台北 票房 综述 神勇 《 海 扁 王 》 暗 联 冠 军 
11:56:55 一 2010-4-27 一 查看 全文 


本 周末 的 台北 厂房 排行 榜 与 上 周末 相 比 变化 不 大 ,冠军 依然 是 由 尼古拉斯 " 训 奇 主演 的 “超级 英雄 电影 ” 《特攻 联盟 
( 本 站 名 《 海 肩 王 》 ) ， 较 于 首 周 未 跌幅 其 小 的 本 片 ， 在 收获 了 本 周末 的 679 万 ( 新 台币 ,下 同 ) 之 后 ， 累 积 票房 使 然 已 
法 “ 准 2000 万 级 别 ”， 对 于 一 部 投资 总 额 羽 为 3000 万 美元 的 好 莱 坞 动作 喜剧 片 而 言 


《特殊 关系 》 发 新 照 聚焦 英国 首相 陈 年 往事 
11:07:22 一 2010-4-27 一 查看 :全 文 
电影 讲述 了 1997 年 至 2000 年 期 可， 当时 的 英国 首相 托尼 "布莱尔 与 当时 的 美国 总 统 比尔 。 克林顿 之 间 的 “亲密 联系 ”。 
同时 电影 还 将 重点 展现 克林顿 与 白宫 实习 生 莱 温 斯 基 在 1995 年 到 1997 年 期 间 的 “不 正当 关系 ”,， 以 及 此 事 被 曝光 后 是 如 


人 英国 演员 麦克 ， 六 将 第 三 次 在 皮特 ， 摩根 的 剧本 中 出 演 托 尼 ， 布莱尔 ， 美国 总 纺 克 林 顿 则 由 演员 


克 里 夫 欧 文 加 盟 动 作 新 片 与 斯 坦 森 演 死对头 


11.07:22 一 2010-4-27 一 查看 :全 文 


据悉 ， 两 位 动作 明星 格 在 片 中 扮演 死对头 ， 一 个 是 前 英国 特种 部 队 成 员 ,一 个 是 有 名 的 刺客 头目 。 影 片 根据 Ranulph 
Fiennes 的 小 说 《The Feather Men》 改编， 由 新 锐 导演 Gany McKendn 执 导 ，McKendn 是 一 位 来 自爱 尔 兰 的 导演 ， 他 执 
导 的 短片 曾 获 奥斯卡 提 各 。 


更 多 电影 新 闻 


图 2-7 最 新 电影 新 闻 部 分 的 DIV 
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这 部 分 的 关键 代码 如 下 所 示 ， 其 中 在 第 5、 第 6 行 ， 定 义 了 新 闻 的 标题 ， 从 第 10~26 行 ， 
定义 了 一 篇 新 闻 的 全 部 要 素 ， 包 括 标题 、 发 布 时 间 和 新 闻 正 文 等 ， 由 于 多 篇 新 闻 的 样式 都 相 
同 ， 所 以 这 里 只 给 出 针对 一 篇 新 闻 的 代码 。 


1. <dqiv id="realTimeNews"> 

受 <div class="rtnHeader"> 

洛 <h2> 

4. <! 标题 文字 --> 

5 最 新 <b><span class="red"> 最 新 电影 新 闻 </span></b></h2> 
6 <ahref="#" rel="nofollow" class="rtnHelp aolHelpPopOutTarget"> 
7 <div id="rtnNavigation"> 

8. <div class="selected" id="rtnNavAl11"> 全 部 新 闻 </div> 
9. 省 略 无 关 的 代码 

10. <div class="asset"> 

FE <div class="description"> 

Ey <div class="headline"> 

3 <! 新 闻 标题 --> 

14. <a target=" blank" href="#"> 

5 《 诸 神 之 战 》 内 地 破 亿 五 一 长 假 前 的 小 低潮 

365 </a> 

到 </div> 

18. <! 新闻 发 布 时 间 -->: 

9- <div class="publishTime"> 

20. <span>9:07:17 </span> 

2 <span>2010-4-27</span> 

2 </div> 

2 <div class="snippet"> 

2 这 里 是 新 闻 的 全 文 

De </div> 

2 </div> 

2 这 里 省 略 其 他 新 闻 模块 的 代码 

2 </div> 

29. </Aiv> 


30. <div class="more"> <a href="#"> 更 多 电影 新 闻 </a></div> 


在 代码 的 第 1 行 里， 我 们 引入 了 ID 为 realTimeNews 的 CSS， 由 此 定义 整个 新 闻 部 分 DIV 的 
样式 ， 这 部 分 的 代码 如 下 所 示 。 


1. #realTimeNews { 

2. ” border-top:3px solid #000000; ”/* 在 每 个 新 闻 顶 部 3 像素 位 置 定义 一 条 边框 */ 
3. float:left; /* 定 义 靠 左 的 悬浮 方式 */ 

4. position:relative; /* 定 义 相对 定位 的 方式 */ 

5 width:639px; /* 定 义 宽度 */ 

Ge 


CF 和 搭建 ”搜索 部 分 的 DIV 


在 首页 中 ， 为 了 方便 用 户 ， 搜 索 部 分 的 模块 出 现 了 两 次 ， 下 面 我 们 来 看 一 下 这 部 分 的 样 
式 ， 如 图 2-8 所 示 。 
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第 2 章 。 众 星 璀 璨 的 影视 网 站 


请 入 入 搜索 


图 2-8 搜索 部 分 的 DIV 效 果 


四 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 第 4 行 ， 定 义 了 搜索 部 分 的 图 标 ， 第 12 行 定义 了 本 文 
输入 框 ， 第 14 行 定义 了 搜索 按钮 。 


1. <divclass="headMiddle footMiddle"> 

流 <div id="moviefoneLogo"> 

3 <! 搜索 部 分 的 图 标 --> 

4 <atitle="Moviefone" href="#"> 

De <img src="image/moviefone-l0go-195x68.jpg" id="mainimage" /> 

6 </a> 

</div> 

8 <div id="moviefoneSearch"> 

9 <div class="searchBar"> 

LOS <form name="movieForm" 2 

J <! 文本 输入 框 --> 

12 <input name="q" type="text" class="srch" id="footerMovieSearch" 
"value=" 请 输入 " 省 略 其 他 要 素 /> 

FE 攻 民 </form> 

Fy <a href="JavaScript:onSubmitMovieSearch ('footerMoviesSearch');" 
id="submit" title=" 搜 索 " class="submit"></a> 

Ss </div> 

Le </div> 

17. </div> 


请 注意 在 代码 的 第 9 行 里 ， 引 入 了 ID 为 chartImage 的 CSS， 它 定义 了 图 片 外 边 距 和 边框 等 
属性 ， 这 部 分 关键 代码 如 下 所 示 。 


.mediumChartWithImages 1i img.chartImage { 
float: left; /* 悬 浮 方式 */ 
margin: 000-66px; /* 定 义 外 边 距 */ 


border: 1px solid #0187c5; ”/* 定 义 边框 */ 

} 

.mediumChartWithImages 1i a:hover img.chartImage { 
border-color: #0187c5; 


ov auw 必 wmwN 


} 


《一 搭建 页 脚 部 分 的 DIV 
这 个 网 站 的 页 脚 部 分 比较 传统 ， 放 置 了 导航 菜单 和 版 权 声明 ， 效 果 如 图 2-9 所 示 。 
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QDvicss missense (#25 -eaea= QQ 


<div id="footLegal"> 
<!--- 定 义 上 半 部 分 的 导航 菜单 -一 
<div class="links"> 
<ul> 
<1i><a href="#"> 搜 索 电影 </a></1i> 
省 略 其 他 导航 菜单 
</ul> 
</div> 
9. ”<!--- 定 义 下 半 部 分 的 导航 菜单 -一 


10. <divclass="links"> 


ne <ul> 

2 <1i><a href="#"> 网 站 地 图 </a></1i> 
IE 过 省 略 其 他 导航 菜单 

14. </ul> 

15. </div> 


16. <! 版 权 声明 --> 

17. <divclass="copyright"> 
Te &copy; 2010 版 权 所 有 
U9 </div> 


请 注意 第 3 行 和 第 10 行 ， 引 入 了 ID 为 links 的 CSS， 


码 如 下 所 示 。 
| 
人 border-bottom: 0.08em solid #cdd4d3; 
3 padding-bottom: lem; 
4. overflow: hidden; 
5 margin-bottom: lem; 
6. display: block; 
了 height: 100%; 
| 


GC 和 首页 CSS 效 果 分 析 


首页 中 其 他 CSS 的 效果 ， 如 表 2-2 所 示 。 
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搜索 电影 | 搜索 电视 剧 | 搜索 影评 搜索 社区 | 搜索 好 友 | 电影 专区 电视 考区 | 动画 专区 


网 站 地 图 | 我 们 的 团队 | 关于 我 们 联系 我 们 | 合作 渠道 | 网 站 帮助 首页 
旧 2010 版 权 所 有 


图 2-9 页 脚 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 代 码 比 较 简 单 ， 就 不 再 详细 说 明了 。 


由 此 定义 了 导航 菜单 ， 这 部 分 CSS 的 代 


/* 设 置 底部 边框 */ 

/* 设 置 底部 内 边 距 */ 

/* 定 义 文字 超出 后 会 自动 隐藏 */ 
/* 设 置 底部 外 边 距 */ 


/* 设 置 高 度 */ 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 


第 2 章 。 众 星 璀璨 的 影视 网 站 


表 2-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 
<img class= "feed-item-| 定义 图 片 浮动 靠 左 
sn 磊 内 部 消息 称 ,这 匈 由 畅销 小 说 改 
thumbnail .feed-item-thumbnail {width: 60px; 蕊 的 到 朱 收 视 平平 
float:left; margin: 6px 6px 6px 4px: 图 片 靠 左 ， 使 文字 
。 ! 能 够 四 在 后 面 上 
display:block;} Aad FE 
<div class= 定义 DIV 中 的 文本 框 内 的 颜色 


"searchBar"> .searchBar form input 


{background:transparent url(../ 


a Fa 


image/mf_header_images_v4.gif) 
repeat scroll 0 -131px;border:0 
none;color:#666; .;} 
<span class= 以 百分比 作为 宽度 ， 适 合用 于 DIV 包 
"sortmenu"> 含 DIV 的 情况 
<img width="27"|.sortmenu {background:#FFFFFF 
height="25" border="0" | none repeat scroll 0 50%;border- 
class="arrow" alt=""|color:#CFCFCF;border- 


src="image/mf_main_|style:solid;border-width:lpx 0 1px 


head_arrowbtn.gif" /> |1px;color:#818181;display:bloc 
ki;float:left;font-size:11px;font- 
weight:normal;height:12px;margin- 
top:1px;padding:5px 5px 6px;text- 


decoration:none;vertical- 


align:top;width:76px;} 


2.3 ”分 类 页 面 


-一 二 


分 类 页 面 多 是 以 分 类 和 电影 列表 为 主 ， 该 页 面 显示 了 电影 的 所 有 分 类 和 这 个 分 类 下 的 所 
有 内 容 。 在 这 个 页 面 中 ， 因 为 页 头 和 页 脚 部 分 和 首页 是 相同 的 ， 所 以 这 里 就 不 再 介绍 了 。 本 
节 主 要 介绍 的 是 中 间 部 分 的 实现 。 此 外 ， 由 于 这 个 页 面 有 些 DIV 的 风格 比较 类 似 ， 所 以 我 们 
就 讲 些 比 较 重要 的 DIV 实 现 方式 。 


CE 分 类 页 面 左边 部 分 的 DIV 


分 类 页 面 左边 部 分 的 DIV 分 为 三 个 部 分 ， 分别 是 分 类 列表 、 正在 热 映 和 排行 
榜 ”， 因 为 内 容 比 较 多 ， 所 以 这 里 分 别 截 出 其 中 的 一 部 分 进行 说 明 ， 如 图 2-10 所 示 ， 它 们 使 
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@、 |DIV+CSS 网 站 布局 案例 精 述 (第 2 版 ) 


用 的 DIV 比较 长 ， 所 以 我 们 分 开 来 截 


网 


图 2-10 分 类 列表 图 


上 图 中 的 三 个 部 分 其 实 是 由 两 个 DIV 组 成 的 ， 第 一 个 DIV 是 分 类 部 分 ， 第 二 个 DIV 是 
正在 热 映 和 排行 榜 组 成 的 ， 只 不 过 是 用 了 不 同 的 CSS， 使 它 看 上 去 像 是 三 个 部 分 
已 ， 其 代码 如 下 所 示 。 


引 


1. <div class="k9"> 

2 <div class="naviga"> 

3 <h3 class="featured"> 热门 分 类 </h3> 

4 <ul> 

5 <1li class="mainnav"><a href="#"> 全 部 </a></1i> 

6 

了 </ul> 

8 </div> 

9. <div class="naviga"> 

10. <h3 style="background-color:#F5F5F5; text-align:center"> 正 在 热 映 </h3> 
Eh be <ul> 

12. <l1i class="item">《 怒 火 凤凰 》</1i> 

LS a 

14. <1i class="clearNav"></1i> 

15. <1i class="item"> 排 行 榜 </1i> 

16. <1i class="item"><a href="#">《 月 光 宝 盒 》</a></1i> 
FE 局 

:二 </ul> 

EW 放 </div> 

20. </div> 


人 攻取 稚 分 类 页 面 中 间 部 分 的 DIV 


分 类 页 面 中 间 部 分 分 成 两 部 分 ， 上 面部 分 是 最 新 电影 ， 下 面部 分 是 影片 列表 ， 下 面 我 们 
依次 说 明 。 

先 来 介绍 上 面部 分 ， 上 面部 分 比较 简单 ， 主 要 就 是 电影 标题 、 电 影 图 片 和 电影 说 明 ， 其 
效果 如 图 2-11 所 示 。 
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《 阿 凡 达 》2010.3.15 上 呐 


更 多 介绍 ”影片 播放 


出 


2-11 中 间 部 分 的 上 部 效果 图 
实现 此 部 分 的 DIV 代 码 如 下 所 示 。 


1. <divclass="body"> 

<div class="left"> <a href="#" target=" blank"> <img border="0" 
src="image/avatar-132.jpg" width="132" height="88" /></a></div> 

3. <h4> <ahref="#" target=" blank"> 阿 凡 达 - 更 多 介绍 </a></h4> 

4. ”<p> 主 角 杰 克 就 是 因为 这 个 被 请 来 的 ， . .</p> 

3 <ul class="dvdWeek"> 

6. <1i><a href="#" target=" blank"> 更 多 介绍 </a></1i> 


7 <1i><a href="#" target=" blank"> 影 片 播放 </a></1i> 
8 </ul> 

FE 间 <div class="clear"> </div> 

10. </div> 


接着 我 们 来 介绍 中 间 部 分 的 下 面部 分 ， 这 部 分 显示 的 是 ”影片 列表 ， 它 包含 了 全 部 的 
影片 ， 这 里 因为 篇 幅 问题 ， 只 给 出 部 分 截图 ， 如 图 2-12 所 示 。 


《 靶 火 风骨 》 《月 光 三 写 )》 《两 极 科 理 人 》 
泰 兰 功 夫 哮 哈 街舞 全 星 委 草 恶搞 喜剧 日 本 南极 生活 实况 
点 评 “播放 点 评 | 基 放 点 评 播放 


图 2-12 中 间 部 分 下 面部 分 效果 图 
实现 这 部 分 的 代码 如 下 所 示 。 


1. <div class="hubCenter dvd"> 


2 <div class="body"> 

:人 <div class="sort"> 

A <div class="sortText"> 影片 搜索 :</div> 
与 二 <div class="sortDropDown"> 


:人 <select name="sort"> 


GDIV+CSS mammeem (#75) RCSCcUJeeuay 


a 

8. </select> 

9. </div> 

UO <div class="clear"> </div> 

Ls </div> 

了 <div class="movieWrapper"> 

13. <div class="movie"> 

14. <img class="thePoster" src="image/nuhuofenghuang.jpg" width="125" 
height="185" /> <a class="movieTitle" href="#"> 

15. <span>《 怒 火 凤凰 》</span> </a> 

i <div class="thisWeekCont"> 

a <div class="thisWeek"></div> 

局 </div> 

9 <div id="movieLinks"> 泰 拳 功夫 嘻哈 街舞 

205 <div class="captHoverDiv"> 

2 <a href="#" class="captHover movieRent" > 点 评 </a> 

2 <ahref="#" class="captHover movieBuy" target=" blank"> 播 放 </ 
a> 

之 3 </div> 

4 时 </div> 


2 </div> 
265 </div> 


we 

28. </div> 
29. </div> 
30. </div> 


上 述 代 码 中 ， 只 给 出 一 个 影片 的 样式 ， 其 他 影片 的 样式 是 一 样 的 ， 就 不 再 重复 说 明了 。 
其 中 第 4~11 行 是 影片 的 搜索 部 分 ， 第 12~26 行 是 影片 列表 的 显示 部 分 ， 在 这 部 分 中 ， 电 影 图 
片 和 电影 名 称 是 组 合 在 一 起 的 ， 使 用 户 使 用 时 有 更 好 的 体验 。 
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美食 资讯 网 站 


随 着 互联 网 的 日 益 发 展 ， 越 来 越 多 的 人 开始 从 网 络 上 获取 生活 方面 的 资 
讯 。 但 是 ， 网 络 上 的 信息 大 多 是 零散 无 序 的 ， 如 果 仅 靠 人 们 自己 从 诸多 网 站 
上 通过 分 析 对 比 获得 最 佳 答案 ， 这 需要 比较 多 的 时 间 ， 所 以 资讯 类 网 站 就 应 
运 而 生 了 ， 这 类 网 站 也 颇 能 吸引 一 定量 的 人 气 。 

这 个 章节 里 我 们 将 介绍 一 个 美食 资讯 网 站 ， 全 面 综合 地 向 用 户 提 供 上 海 
的 餐厅 和 食谱 等 美食 方面 的 信息 。 这 个 网 站 里 包含 了 首页 、“ 和 餐厅 列表 ”和 
“美食 店铺 介绍 ”三 大 页 面 ， 这 类 网 站 的 成 功 典范 是 大 众 点 评 网 。 


3.1 ”网 站 页 面 效果 分 析 


本 网 站 属于 美食 资讯 类 网 站 ， 所 以 第 一 要 用 精美 的 图 片 来 引起 访问 者 消费 的 欲望 ， 
第 二 要 包容 足够 多 的 均 厅 等 资 询 信息 ， 第 三 要 提供 完备 的 搜索 入 口 ， 让 用 户 能 很 容易 地 找到 
自己 感 兴趣 的 信息 。 

在 本 章 中 ， 将 着 重 分 析 美 食 网 站 首页 和 ”美食 店铺 介绍 页 面 的 设计 样式 ， 而 第 三 个 包 
含 搜 索 结果 的 ”餐厅 列表 页面， 虽然 也 比较 重要 ， 但 它 的 风格 与 前 两 个 页 面 非常 相似 ， 所 
义 就 不 再 发 述 了 。 


《到 国 首页 效果 分 析 


资讯 类 网 站 的 首页 一 般 需要 包含 比较 多 的 信息 ， 这 个 网 站 也 不 例外 ， 首 页 的 篇 幅 比较 
长 ， 分 为 七 行 的 样式 。 
如 图 3-1 所 示 ， 在 第 一 行 里 ， 放 置 了 登录 注册 、 导 航 菜单 和 ”搜索 三 大 功能 模块 。 

在 第 二 行 里 ， 放 置 了 高 级 搜索 和 广告 图 片 ” 两 大 模块 。 如 图 3-2 所 示 ， 第 三 行 是 本 网 站 
的 主体 ， 其 中 将 用 多 个 DIV， 放 置 ”免费 试 吃 均 厅 、 免费 菜谱 下 载 、 热门 菜品 和 
疾 升 排行 榜 等 内 容 。 如 图 3-3 所 示 ， 在 第 四 行 里 ， 放 置 了 美食 图 片 ， 在 第 五 行 里 ， 放 置 了 
大 厨 和 美食 家 ”活动 模块 ， 在 第 六 行 里 ， 放 置 了 ”关于 我 们 、 获取 帮助 、 加 入 美 
食 阵 营 和 更 多 操作 ”等 部 分 的 功能 菜单 ， 在 最 后 一 行 里 ， 将 放置 页 脚 的 导航 菜单 和 版 权 
声明 信息 。 
首页 的 样式 由 于 篇 幅 比 较 大 ， 所 以 分 三 个 截图 介绍 ， 如 图 3-1、 图 3-2、 图 3-3 所 示 。 


.|DIV+CSS 网 站 布局 案例 精粹 (第 2 版 ) 
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pe 


比如 ， 豆 欢 烧 烤 ， 豆 欢 寿司 ， 还 喜欢 、 和 
欢 哪 种 ? 


| 了 医 呈 


独特 的 味觉 享受 
同时 获得 庆 惠 券 ， 和 免费 试 吃 等 忧 惠 项 目 


网 


3-1 首页 前 两 行 的 效果 


网 


中 式 料理 理 日 本 料理 二 团 料 理 法 图 料理 意大利 台 墨西哥 菜 巴西 料理 眉 板 烧 
烹 系 导航 功能 块 
免费 菜谱 下 载 
免费 试 吃 餐馆 
申 谍 轩 (静安 店 ) Er 
前 安 区 陕西 北 路 123 号 上 海 2 
加 1 条 内 15 个 斌 史上 G 芝士 龙虾 介面 
上 海 人 东 [ 黄 浦 店 
隔 庆 屋 时 古 Er 
清 区 13 14 0 网 油 当 看 匡 看 鱼 CEGED 
ee 4 上 海 人 家 | 黄浦 店 ， 
美 华 轩 | 美 健 洒 家 ) [| 和 CLED 
售 谍 区 天 平 路 24< 号 < cassccagy > 上 海 。 了 
多 和 nm 南瓜 里 根 蓝 限 澳 带 CE 
王 四 条 家 上 海 放 机 店 
查看 更 多 试 吃 活动 OQ 查看 更 多 免费 莱 舌 加 


水 晶 是 仁 
美食 网 上 点 评 晤 多 的 菜品 
EE 


身 放 猪尾 
本 周 在 上 海景 流行 的 荣 品 
= 素 点 评 

查看 更 多 非 品 加 
和 您 是 大 厨 吗 ? 您 可 以 直接 取得 收益 。 


悠 的 食客 可 能 已 经 为 修建 立 了 网 页 。 加 入 地 们 的 行列 悠 的 荣县 每 这 点 评 一 次 ,就 
会 给 悠 带 来 一 份 收入 ， 另外， 美食 隔 下 向 食 客 推荐 信 菜 品 ， 悠 的 菜品 定 会 找到 知音 。 


这 一 切 那 是 免费 的 。 


网 


3-2 首页 主体 部 分 的 效果 


|| 


查看 更 多 热门 荣昌 信 
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1 寻找 美 全 |VP《 代 筑 月 户 抽 RE ) 


同 折 机 所 有 | 这 用 条 基 和 隐私 可 政策 


图 3-3 后 三 行 的 效果 图 


《有 有 美食 店铺 页 面 的 效果 分 析 


美食 店铺 页 面向 访问 者 介绍 餐厅 的 详细 信息 ， 这 个 页 面 的 样式 与 首页 有 部 分 相似 的 地 
只 给 出 最 具 特 色 的 主体 部 分 ， 它 分 为 三 列 ， 效 果 如 图 3-4 所 示 。 


方 ， 所 以 这 里 


i 
ML 上 RE 
mp 
地 图 
We 


ry 
多 花花 火锅 


主题 信息 
ET 
请 香 者 欠 从 要 二 在 FID EM 人生 昌 
可 村 重合 的 全 网 有 到 寺 结 介 们 


生硬 有 一 四 Li 二、 束 负 、 委 人 力 工 起 直 语 中 二 帮 思 人 化 力 内 友人 
1 和 在 类 二 站 的 和 广州 于 对 ， 主力 条 潮 成 为 如 站 新 洁 祭 为 目的 “区 项 全- 
TE 
和 讽 ， 几 和 提 、 生 天 开 再 要 请， 左 和 未 呈 修正 而 六 寺 下 各 1 

号 ,由 + 二 加 


独 有 的 国家 羊肉 生 产 专利 技术 的 生产 基地 ， 幸 自 大 章 折 的 空运 
妇 信 行 机 邱 早 著 手 肉 。 已 申请 并 亚 得 专利 权 的 水 晶 火 锅 和 各 种 
蝇 芝 删 庆 的 等 月 用 品 。 多 年 清心 研 发 并 以 货 措 有 168 安 加 黑店 
的 刍 广 关 味 可 识 嬉 品 饮 的 半球 汤 计 。 来自 丸 潮 发 源 地 广州 的 外 
芋 大 师 密 制 的 邱 手 工 制作 口 星 非凡 的 丸 滑 。 儿 合 各 家 之 长 ， 箱 
会 本 十 性 会 文 优 为 多 提供 的 各 天 今 各 坑口 大 开 的 稚 破 及 新 尖 测 
品 。 罩 下 大 利 西 都 厅 专 业 丁 点 制作 贡生 4 各 稚 的 点 心 、 吧 奸 
等 。 为 商务 人 士 提供 的 绝无仅有 、 首 家 各 创 的 已 黎 坦 专利 技术 
的 精美 火 名 去 管 - 


pm spo 


mE ©O 
图 片 展示 
A 
留言 箱 
Re 
EO 


图 3-4 餐厅 页 面 的 效果 图 
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《民生 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img，css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 3-1 所 示 。 
表 3-1 美食 网 站 文件 和 目录 一 览 表 

模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 

Dian.html 描述 餐厅 信息 的 页 面 

events.html 描述 餐厅 列表 的 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


3:2 。 规划 首页 的 布局 


首页 中 的 内 容 相 当 复杂 ， 我 们 把 它 分 成 几 个 部 分 ， 分 析 一 下 首页 中 诸多 重要 DIV 的 设计 
方式 。 


页 页 头 的 DIV 


首页 的 页 头 部 分 ， 包 含 了 注册 登录 模块 ”、 导 航 菜单 和 搜索 模块 三 大 部 分 ， 样 式 如 图 
3-5 所 示 。 


雹 厅 美食 活动 ”博客 论坛 


图 3-5 首页 页 头 的 DIV 设 计 分 析 图 


实现 页 头 部 分 的 关键 代码 如 下 所 示 ， 在 第 2 行 里 ， 定 义 了 页 面 的 Logo， 从 第 3~8 行 ， 定 义 
了 导航 菜单 ， 而 在 第 10~15 行 里 ， 定 义 了 注册 和 登录 功能 模块 ， 从 第 17~21 行 ， 通 过 form 定 义 
了 搜索 模块 。 


1 <div id="header" class="clearit"> 

a <div id="headerWrapper"> <a href="index.html" id="lastfmLogo"> 美 食 网 </a> 
< <ul id="primaryNav"> 

4 <1i id="musicNav" class="navIitem"> 

5 <a href="dian.html" class="nav-link"> 和 餐厅 </a> 

6 < 
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i 省 略 其 他 导航 菜单 

[ </ul> 

9. <div id="profileLinks"> 

LO <ul> 

Eb <1Li id="loginLink" class="profileItem"> 

Eb <a href="#" class="profile-link"><strong> 登 录 </strong></a> </1i> 

:后 <1Li id="signupLink" class="profileItem"> 

14. <a href="#" class="profile-link"><strong> 注 册 </strong></a> </1i> 

L153 </ul> 

16. </div> 

Rs <form id="siteSearch" method="get" class="autocomplete"> 

ey 省 略 其 他 搜索 部 分 的 代码 

19 。 <button id="siteSearchSubmit" type="submit" class="submit" title=" 搜 
索 "> 

205 </button> 

2 </form> 


22. </div> 


全 搭建， 高 级 搜索 “部 分 的 DIV 


这 部 分 页 面 提供 了 比较 ”智能 化 


的 搜索 方式 ， 能 让 用 户 根据 自己 的 喜好 美食 网 会 根据 你 的 喜好 推荐 餐厅 
找到 感 兴 趣 的 餐厅 ， 这 部 分 的 效果 如 


比如 ， 喜 欢 烧 烧 ， 喜 欢 寿 司 ， 还 喜欢 


3-6 所 示 。 cd 
这 部 分 的 关键 代码 如 下 所 示 ， 其 中 
在 第 3~7 行 里 ， 定 义 了 智能 提示 菜 
单 ， 在 第 9~14 行 里 ， 用 form 的 形式 定义 
了 搜索 文本 框 和 ”确定 ”按钮 ， 而 在 第 
15~18 行 里 ， 定 义 下 方 的 ”智能 提示 


半音 图 3-6 高 级 搜索 部 分 的 DIV 效果 图 
Je<diwvad=”contene > 
2 <div class="wrapper"> 
六 <h2 class="tagline"> 美食 网 会 根据 你 的 喜好 推荐 餐厅 </h2> 
<p class="example"> 比 如 ， 喜 欢 烧烤 ， 喜 欢 寿 司 ， 还 喜欢 
与 <a href="#"> 法 国 菜 </a>、<a href="#"> 中 国 菜 </a> 和 
6 <a href="#"> 日 本 料理 </a>。 您 喜欢 哪 种 ? 
| </p> 
8 <div class="search"> 
9 <formmethod="get" id="artistSearchForm" class="clearit"> 
10. <label for="artistSearch"> 您 喜欢 哪些 菜 式 ? </label> 
区 <input type="text" class="text" id="artistSearch" /> 
25 <button type="submit" value="submit" class="submit"> 
3 <span> 确 定 </span></button> 
14. </form> 
FS 和 <p id="searchSuggest"> 
15< 您 还 可 以 尝试 <a href="#"> 快 餐 </a>、<a href="#"> 本 帮 菜 </a>、 
了 3 <a href="#"> 土 家 菜 </a> 或 <a href="#"> 家 常 菜 </a>。 
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18. </p> 
19. </div> 
20. </div> 

21. </div> 


请 注意 代码 第 4 行 里 ， 引 入 了 ID 为 example 的 CSS， 这 部 分 的 关键 代码 如 下 所 示 ， 它 设置 
了 智能 提示 “部 分 的 文字 样式 。 


1. #anonIntrop.example { 

2 padding: 001.5em0; 

3. ”color: #fff; /* 定 义 颜色 */ 

4. ”font-size: 14px; /* 定 义 字 体 大 小 */ 
5 line-height: 1 em; /* 定 义 字 高 */ 
6 font-weight: bold; /* 定 义 字 体 */ 
pe; 


E 对 搭建 ”免费 试 吃 餐 厅 部 分 的 DIV 


免费 试 吃 餐 馆 三 个 免费 试 吃 在 首页 中 ， 为 了 豚 引 人 气 ， 可 以 
i Ew 。 。 放置。 免 费 试 吃 餐 厅 模块 ， 通 过 这 个 
ML 人 2 模块， 一些 餐厅 能 更 好 地 在 网 站 上 打 广 


加 1 条 点 评 18 个 斌 "名 机 


告 。 这 部 分 的 样式 如 图 3-7 所 示 。 


且 庆 时 而 mn 

CE 这 部 分 的 关键 代码 如 下 所 示 ， 其 中 
.scams 在 第 8 行 ， 放 置 了 左边 部 分 的 图 片 ， 而 在 
EP 第 10~14 行 ， 放置 了 图 片 下 方 的 说 明文 
坦 痢 更 多 芭 吃 i 动 加 ” 字 ， 在 第 16~29 行 里 ， 放 置 了 左边 部 分 的 
图 3-7 免费 试 吃 餐厅 部 分 的 DIV 一 个 免费 试 吃 的 店铺 ， 这 里 有 3 个 店铺 ， 
剩余 的 两 个 店铺 的 代码 与 第 一 个 很 相 

似 ， 这 里 就 不 再 重复 说 明了 。 


1. <divid="dashboardModules"> 

2 <div class="content"> 

a <h2> <a href="#"> 免 费 试 吃 和 餐馆 </a> </h2> 

4. <strong class="subtitle"> 本 地 餐厅 </strong> 

3 <ul class="eventsMediumWithFeatured"> 

上 <1li class="vevent gigfirst future hasposter"> 

了 <!--- 放 置 大 图 片 -> 

8. <a href="#" style="background-image: url (img/0001.jpg);"> 
9. <! 大 图 片 下 面 的 对 应 文字 --> 

10. <strong> 老 洋房 花园 饭店 </strong> 

FE <span class="location adr"> 

2 卢湾 区 绍兴 路 27 号 〈 近 陕西 南路 ) 

3 <span class="locality"> 上 海 </span> </span> </p> 
14. Wa> 

To <! 如 下 放 三 个 免费 试 吃 的 店铺 --> 

L6. <li class="vevent gig future"> 

了 <div class="container"> 

18 <! 省 略 店铺 的 其 他 地 址 --> 
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EE 风 <span class="location adr"> 

20E 静安 区 陕西 北 路 128 号 

ZT <span class="locality"> 上 海 </span> 

2 </span> 

23> <p class="info"><span class="shoutCount"> 

24. <a href="#" class="icon"> 

25. <img class="icon comment icon" width="13" height="11" src="img/clear. 
Em 

6 <span>1 条 点 评 </span> </a> </span> | 8 个 试 吃 名 额 

2 </p> 

这 8 </div> 

9 =i 

30. 省 略 其 他 两 个 试 吃 的 店铺 的 信息 

< 加 </ul> 

32. </div> 

33= <span class="moduleOptions"> 

34. <a href="#"> 查看 更 多 试 吃 活动 </a> 

5 </span> 

36. </div> 

37. </div> 


搭建 ” 顽 升 排行 榜 ”部 分 的 DIV 


在 首页 中 ， 存 在 着 多 个 ”标题 加 图 片 加 文字 样式 
的 DIV， 这 里 我 们 以 ” 问 升 排行 榜 为 例 ， 说 明 一 下 这 类 
DIV 的 开发 方式 ， 这 部 分 的 效果 如 图 3-8 所 示 。 

这 部 分 的 关键 代码 如 下 所 示 ， 其 中 在 第 3 和 第 4 行 里 ， 
给 出 这 部 分 DIV 里 的 头 文字 ， 而 在 第 5~17 行 ， 用 ul 和 li 的 方 
式 给 出 了 诸多 图 片 加 文字 部 分 的 样式 。 


1. <divclass="dashboardModule"> 
2 


<div class="content"> | 
= 从 <h2><a href="http://cn.last.fm/charts"> 
问 升 排行 榜 </a></h2> 
4 <strong class="subtitle"> 火 热 菜 品 </ 
Strong> 
与 <ul class="mediumChartWwithIimages 
en 查看 更 多 热门 菜品 加 
6. <1i class="first odd"> 图 3-8 飙升 排行 榜 部 分 的 DIV 
<a href="#"> 
8 <! 图 片 部 分 --> 
9 <img class="chartImage" height="64" width="64" 
10 . src="img/44989115.jpg" /> 
并 <! 文字 部 分 ， 这 里 只 给 出 关键 部 分 代码 -一 > 
2 <p> <strong> 外 婆 红烧 肉 </strong> 
并 <small>7,191 位 食客 </small> 
14. </p> 
5 /LTL> 


本 55 省 略 其 他 部 分 的 排行 榜 菜 单 


QDvicss manmem (#2 J-—sSq〔〈G。GL_L、—{zLtnhnNheuQQuQOoOOro 


E 攻 全 </ul> 

LB </div> 

Eb <span class="moduleOptions"> 

ZO <a href="#"> 查 看 更 多 热门 菜品 </a> 

pa </span> 

2 </div> 

23° </div> 

请 注意 在 代码 第 9 行 里 ， 引 入 了 ID 为 chartImage 的 CSS， 这 部 分 关键 代码 如 下 所 示 ， 它 定 
义 了 图 片 外 边 距 和 边框 等 属性 。 

1. .mediumChartWithImages 1i img.chartImage { 

2 float : left; /* 悬 浮 方式 */ 

3 margin: 000-66px; /* 定 义 外 边 距 */ 

4 border: 1px solid #0187c5; /* 定 义 边 框 +/ 

Sh 

6. .mediumChartWwithImages 1i a:hover img.chartImage { 

全 border-color: #0187c5; 

Sh 


EE 于 搭建 页 脚 部 分 的 DIV 
这 个 网 站 的 页 脚 部 分 比较 传统 ， 放 置 了 导航 信息 和 版 权 声明 ， 效 果 如 图 3-9 所 示 。 


美食 网 站 点 导航 ;。 博 客 1 搜索 餐厅 1 寻找 美食 TVP 付费 用 户 货 广 区 中 


四 2010 美食 网 版 权 所 有 | 使 用 条 款 和 隐私 权 政策 | 2009 年 月 更 


图 3-9 页 脚 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 代 码 比较 简单 ， 所 以 就 不 再 说 明了 。 


EE <div id="justCantGetEnough" class="clearit"> 
FE <p> <strong> 美 食 网 站 点 导航 : </strong> 

ws <a href="#"> 博 客 </a> | 

3 <a href="#"> 搜 索 餐 厅 </a> | 

2 <a href="#"> 寻 找 美食 </a> | 

5 <a href="#">VIP〔 付 费用 户 贵宾 区 ) </a> 

6. </p> 

</div> 

加 <div id="legalities"> 

9 <p id="copy"> &copy; 2010 美食 网 版 权 所 有 | 

10. <a href="#" target=" blank"> 使 用 条 款 </a> 和 
os <a href="#" target=" blank"> 隐 私 权 政策 </a> | 
Eb <span class="date">2009 年 8 月 更 新 </span><br Hx 
LE 区 坟 </p> 

14. </div> 
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全 首 页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 阁 
中 其 他 CSS 的 效果 ， 如 表 3-2 所 示 。 
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分 CSS 的 代码 ， 这 里 我 们 用 表格 的 形式 描述 首页 


表 3-2 首页 DIV 和 CSS 对 应 关系 一 览 


DIV 代码 


CSS 描 述 和 关键 代码 


效果 图 


<a href="#" class= 


"bluebutton"> 


<p class="info"> 


<a href="#" class= 


"profile-link"> 


将 a 标记 定义 成 按钮 效果 
a.bluebutton { 
height: 26px:; 
display: -moz-inline-box; 
display: inline-block; 
url( ../../img/bluebutton-right.2.png 
repeat right top; 


} 
在 图 片上 打上 半 透 明 阴影 
pinfo { 


position: absolute; 
display: block; 
background: #000; 
color: #fff; 
filter:alpha(opacity=90); 


} 
登录 看 上 去 处 于 被 点 中 状态 
.profile-link { 


display:-moz-inline-stack; 


display: inline-block; 


text-decoration: none; 


font-weight: normal; 


) no- 


立即 体验 


这 是 一 个 A 标记 


黑色 部 分 
个 半 透 明 阴 影 


广 册 登录 


登录 按钮 的 特效 


3:3 ”在 首页 中 实现 动态 效果 


在 这 个 美食 资讯 网 站 中 ， 使 用 DIV+CSS 实 现 的 动态 效果 都 集中 在 几 个 导航 栏 里 ， 下 面 我 
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们 来 介绍 其 中 的 一 个 导航 栏 ， 其 效果 如 图 3-10 所 示 。 


图 3-10 导航 动态 效果 


我 们 在 菜 式 导航 中 以 中 式 料理 为 例 ， 此 部 分 的 页 面 代 码 如 下 所 示 。 


1. <div class="filterTags"> 

2 <ul class="clearit"> 

3 <1i> <a href="#" ><span> 中 式 料理 </span></a> </1i> 
4. <1i> <a href="#" ><span> 韩 国 料理 </span></a> </1i> 
3 

6 

yl 


</ul> 
</div> 


因为 其 他 菜 式 导 航 的 代码 是 一 样 的 ， 所 以 这 里 就 只 给 出 效果 图 中 的 两 个 菜 式 ， 这 部 分 的 
代码 比较 简单 ， 这 里 就 不 再 详细 说 明了 。 
这 个 样式 主要 就 是 CSS 定 义 ， 其 关键 代码 如 下 所 示 。 
/* 在 filterTags 这 个 css 下 的 1i 中 的 a 标记 定义 样式 */ 
.filterTags liaf{ 
display: block; /* 这 部 分 定义 成 块 */ 
background: #FFF url(../../img/tag left1.png) no-repeat left top; /* 引 用 


font-size: 11px; 

line-height: 24px; 

height: 24px; 

margin: 0 10px 0 0; 

9 padding: 000 3px; 

Us COLOrS S33 

11. cursor: pointer; /* 鼠 标 手 型 */ 

12 WGChE ISP 

EE 全 

14. /* 在 filterTags 这 个 css 下 的 1i 中 的 a 标记 中 的 span 定 义 样式 */ 
15. .filterTags lia span{ 

16. display: block; 

17. line-height: 24px; 

18. height: 24px; 

19. background: #FFF url(../../img/tag right.png) no-repeat right top; 
20. text-align: center; /* 字 体 居中 */ 


= 
22. /* 鼠 标 停留 时 ， 字 体 出 现下 划 线 */ 
23. .filterTags 1i a:hover { 
24. text-decoration: underline; /* 定 义 字体 下 划 线 */ 
2 
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在 上 述 代码 中 ， 从 第 2~13 行 是 为 这 个 菜 式 导 航 整 体 定义 样式 ， 其 中 第 6 行 、 第 7 行 和 第 12 
行 定义 这 个 区 域 的 宽度 和 高 度 ， 第 2 行 把 这 个 区 域 定 义 成 一 个 整体 ， 第 8 行 、 第 9 行 定义 了 这 


个 导航 和 相 邻 导航 之 间 的 距离 。 
而 第 15~21 行 定义 了 这 个 区 域 中 的 字体 样式 和 背景 图 片 样式 ， 这 部 分 代码 比较 简单 ， 就 
不 再 做 说 明了 。 


包括 菜 生 


3:4 。 店铺 介绍 页 面 


店铺 介绍 页 面 中 ， 主 要 展示 了 店铺 的 介绍 和 相关 的 图 片 ， 有 半 部 分 则 是 店铺 相关 类 表 ， 


、 地 图 、 优 惠 券 等 ， 下 面 详细 介绍 该 页 面 。 


到 店铺 介绍 页 面 菜 单 标签 的 DIV 


这 里 


标签 做 了 一 个 店铺 菜单 导航 的 功能 ， 如 图 3-11 所 示 。 根 据 选择 不 同 的 标签 ， 显 示 


相应 内 容 。 那 我 们 要 如 何 设计 该 区 域 呢 ? 如 何 实现 切换 功能 呢 ? 请 先 看 下 面 的 标签 代码 ; 


花花 火锅 


2008 年 底 第 一 家 以 时 尚 、 高 贷 
以 近 10 年 在 火 娲 业 的 积淀 为 基础 ， 至 态 于 天 
火 网” 一 一 站 亮 登 陆 上 海 漆 。 请 竺 港 名 设计 师 结合 公司 企业 文化 设计 的 店内 用 


屁 环 境 ， 山 难 、 好 适 、 浪 漫 而 有 情调 。 温 击 提 示 你 小心 在 店内 玉 路 哦 
20 人 留言 | 由 hueniglbounce 添 加 


独 有 的 国家 羊肉 生产 专利 技术 的 生产 基地 ， 来 自 大 草原 的 空运 
绿色 有 机 纯 评 闫 羊肉。 已 申请 并 获得 专利 权 的 水 晶 火锅 和 各 种 


人 


图 3-11 店铺 介绍 页 面 菜 单 标签 DIV 效果 展示 


<div id="secondaryNavigation"> 
<ul> 
<1i class=" current first uberlink"><a href="dian.html"> 店 铺 首页 </a></ 


<1i><a href="#"> 网 上 定位 </a></1i> 
<! 其 他 标签 略 --> 
</ul> 
</div> 
<! 以 上 标签 区 域 --> 


<div class="leftCol"> 


. <div class="leftColWrapper"> 


<div id="calsheet"> 
<span class="calSheet calSheetSmall clearit"> 
<abbr class="dtstart" title="20100507T20002Z"> 
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14. <span> 

5s <span class="month">4 月 </span> <span class="day">27</span> 

= </span> </abbr>. 

LE </span></div> 

18. <div id="poster"> 

Eb 加 <div id="smallPoster"> 

0 <span id="posterLarge" class="lineupPoster clearit 
lineupPosterlarge posterToggle" style=" width: 126px;"> 

2 <span><strong> 花 花火 锅 </strong></span> 

区 2 <img title=" 花 花火 锅 " height="126" width="126" alt="" src="img/001. 
jpg" /> <span class="foot"> 美食 网 <br /> 

二 加 <strong>2010 年 4 月 27 日 , 星期 二 </strong> </span> </span> 

24. <img src="img/tape.png" class="theTape transparent png" width="36" 
height="17" /> </div> 

25- <p> <a href="#" id="uploadPoster"> 花 花火 锅 </a> </p> 


2 </div> 
hs <div id="details"> 


28. <hl class="summary"><a href="#"> 花 花火 锅 </a></h1> 
29。 <p class="buttons"> 2008 年 底 第 一 家 以 时 尚 、 高 贵 </p> 
30s </div> 

< hb </div> 

32. ”省 略 其 他 次 要 代码 

33. </div> 


上 面 我 们 给 出 了 标签 和 内 容 显示 区 域 的 代码 ， 从 代码 中 能 看 到 secondaryNavigation、 
calsheet、poster、details 四 个 DIV 分 别 定义 了 标签 、 日 期 、 图 片 和 店铺 描述 的 区 域 。 

值得 注意 的 是 我 们 一 定 要 把 secondaryNavigation 和 leftCol 之 间 的 间距 设置 为 0， 这 样 做 
能 使 标签 i 显示 右边 框 线 。 


本 允 站 店铺 介绍 页 面 右边 相关 介绍 的 DIV 


店铺 介绍 页 面 右 边 部 分 介绍 店铺 的 相关 描述 信息 ， 方 便 访客 对 店铺 信息 进行 查询 ， 包 括 
菜单 、 地 图 、 优 惠 券 等 ， 如 图 3-12 所 示 。 


图 3-12 相关 信息 展示 


第 3 章 美食 资讯 网 站 


图 3-12 中 的 效果 主要 使 用 嵌 套 的 dl 实现， 其 代码 如 下 所 示 。 


1. <divclass="rightCol"> 


2 <h2 style="border-top: 0;margin-top: 0;" class="heading"><span 
class="h2Wrapper"> 主 题 信 息 </span></h2> 

这 <table class="chart"> 

4. <tbody> 

Se <tr class="first streamable" data-track-id="33628360"> 


了 <td class="playbuttonCell"> </td> 

hs <td class="subjectCel1"><a href="#"> 请 单 击 此 处 查阅 本 店 的 菜单 </a> </td> 
<td class="durationCell"> </td> 

8. </tr> <!---// 代 码 略 。 ---> 

9. </tbody> 

10. </table> 

Ls <div id="LastAd TopRight" class="LastAd"> 

2 <div align="center"> <!---// 空 格 区 域 略 --> </div> 

EE 区 </div> 

14. <!-- Adserving end --> 

Et <h2 class="heading"><span class="h2Wrapper"> 

16. <a href="#"> 设 备 服务 </a></span></h2> 

LE 网 属 <p class="writeReview"> 

18. 有 残疾 人 无 障碍 设施 <br> // /代码 略 

区 </p> 

20. </div> 


上 半 部 分 主题 区 域 用 了 table 布 局 ， 表 格 布局 不 需要 写 太 多 的 代码 ， 有 时 ， 针 对 一 项 的 布 
局 ， 我 们 也 可 以 用 表格 布局 ， 很 多 人 设计 时 滥用 DIV， 遇 到 标签 都 用 DIV 实现 。 我 们 要 尽量 
避免 这 种 问题 ， 因 为 大 量 DIV 使 用 会 使 设计 过 度 复 杂 。 
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动物 是 人 类 的 好 朋友 ， 随 着 社会 的 发 展 ， 越 来 越 多 的 宠物 进入 了 人 们 的 
家 庭 ， 成 为 了 各 自主 人 家 庭 里 的 幸福 一 员 。 

在 这 个 章节 里 ， 将 讲述 一 个 宠物 网 站 的 实现 方式 ， 这 个 网 站 使 用 图 片 加 
文字 的 方式 ， 讲 述 “更 好 地 和 宠物 交 朋友 ”这 个 主题 ， 网 站 主要 包含 首页 、 
“宠物 社区 ”和 “热点 宠物 ”三 个 页 面 。 


41 网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 宠 物 网 站 的 首页 和 ”宠物 社区 ”页面 的 设计 样式 ， 而 “热点 宠 
物 页面 风 格 比较 简单 ， 所 以 就 不 做 详细 说 明了 。 


CH 首页 效果 分 析 


宠物 网 站 的 布局 还 是 比较 奇特 的 ， 如 图 4-1 所 示 ， 我 们 采用 两 行 的 样式 ， 其 中 ， 第 一 行 主 

要 分 为 两 列 ， 左 边 列 主要 包含 网 站 Logo、 ”新闻 、 ”图片 欣赏 等 内 容 ， 右 边 列 主要 包含 

联系 方式 、 ”宠物 故事 、 ”宠物 信息 等 内 容 在 第 二 行 里 放置 了 导航 菜单 、 版 权 信 
息 和 友情 链接 。 


宠物 新 闻 ， 时 更 新 


在 这 里 ， 您 还 可 以 看 到 发 生 在 我 们 
身边 ， 感 人 的 宠物 故事 。 体 会 宠物 
给 我 们 带 来 的 快乐 和 悲伤 。 


爷 可 以 购买 或 了 


言 作 人 人 


宠物 社区 页 面 的 效果 分 析 


宠物 社 


区 页 面 如 


网 


4-2 所 示 ， 


加 人 全 所 有 硬 旭 光 和 的 用 到 组 反 和 
为 所 有 半生 友 寻 立 的 网 上 闪光 平台 


联系 电话 : 12345678 
传真 ，021-12345678 


e_maill23B163 com 


站 长 的 宠物 
照片 


和 
i 


S 
记录 发 生 在 我 们 身边 宠物 的 事 


感人 的 定 物 
们 带 来 的 快 未 和 巧 汗 。 为 每 个 
骨 友 提 兴 了 一 个 可 以 殿 示 自 


鬼 的 期 友 宠物 故事 


热门 宠物 信息 


展示 各 种 宠物 的 粮食 。 


这 个 页 


版 权 信息 、 


可 采用 了 三 行 样 式 ， 


9 


A 


Ea 


行 放置 的 是 Logo 和 导航 ， 第 三 行 放置 的 是 导航 、 


友情 链接 ， 这 些 和 首页 的 效果 是 相同 的 ， 这 里 就 不 


做 说 明了 。 而 在 第 二 行 里 ， 


放置 的 是 完 
第 二 行 的 效 


果 。 


移 粮食 列表 ， 因 为 本 页 的 导航 存在 与 首页 不 相同 的 


也 方 ， 所 以 图 4-2 给 出 第 一 行 和 
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网 站 文件 综述 


的 文件 部 分 是 比较 传统 的 ， 


这 个 页 


美国 绿 的 洁 元 骨 小 号 


美国 雪山 琉 豆 区 内 全 狂 廊 》 


宠物 知识 宠物 社区 


美国 凌 灯 号 华 成 大 犬 粮 
30 00 元 


J 00 元 
兰 400.00 元 


| 


4-2 宠物 社区 页 面 的 效果 图 


风 


片 、CSS 文 


件 和 JS 代码 ， 


分 别 保存 网 站 所 


images、css 和 js 三 个 


文件 


功能 丸 


0 表 4-1 所 示 。 
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表 4-1 宠物 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
| news.html 热点 宠物 页 面 
| video-list.html 宠物 社区 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 甘 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


4.2 ”规划 首页 的 布局 


宠物 网 站 的 首页 比较 重要 ， 我 们 希望 它 拱 建 得 又 漂亮 又 大 气 。 本 节 我 们 把 首页 分 为 几 个 
部 分 来 依次 讲述 。 


于 搭建 首页 页 头 的 DIV 


首页 页 头 是 比较 重要 的 部 分 ， 了 
它 不 仅 包括 网 站 Logo 部 分 ， 还 包括 完 物 网 C3 
了 网 站 的 导航 部 分 ， 首 页 第 一 行 左 TE 
边 列 的 上 边 部 分 就 是 网 站 页 头 ， 这 
部 分 的 效果 如 图 4-3 所 示 。 

首页 页 头 部 分 的 关键 代码 如 下 


首页 热点 宠物 宠物 知识 


图 4-3 首页 页 头 设计 分 析 图 

所 示 : 

1. <divid="contenido"> 

区 <h2><a href="index.html" class="logo"><strong>logo</strong></a></h2> 

3 <span><a href="#"> 欢 迎 来 到 宠物 网 </a></span> 

4 <ol> 

5 <1li igd="nosotros"><a href="index.html"> 首 页 </a></1i> 

6 <li id="servicios"><a href="news.html"> 热 点 宠物 </a></1i> 

<1i id="trabajos"><a href="video-1ist.html"> 宠 物 知识 </a></1i> 

8 <li id="contacto"n><ahref="video-1ist.html"> 宠 物 社区 </a></1i> 

9 </o1> 

10. </div> 


其 中 ， 第 4 行使 用 的 标签 是 ol， 这 是 一 个 无 序列 表 ， 在 DIV+CSS 中 使 用 得 比较 少 的 。 
这 里 要 注意 的 就 是 第 5-8 行 ， 每 个 li 标签 都 使 用 了 不 同 的 ID， 这 是 因为 页 头 所 使 用 的 导航 
都 是 图 片 ， 如 第 5 行 引用 的 nosotros， 其 CSS 关 键 代 码 如 下 所 示 。 
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1. #nosotrosaf 
2 
3 


background-image: url(../images/nosotros.png); 
} 


《CE 搭建， 宠物 新 闻 部 分 的 DIV 


首页 第 一 行 的 中 间 部 分 分 为 2 个 部 分 ， 左 边 部 分 是 


在 这 里 wun 人 宠物 新 闻 ”部 分 ， 这 部 分 的 效果 如 图 4-4 所 示 。 


血 边 


人 这 部 分 的 关键 代码 如 下 所 示 。 


给 我 们 带 采 的 快乐 和 恶 伤 。 


4-4 宠物 新 闻 部 分 的 DIV 效果 图 


amwb p 


<div class="izq"> 
<p> 宠 物 新 闻 ， 热 点 ， 及 时 更 新 . . .</p> 
<h3></h3> 
<p> 在 这 里 ， 您 可 以 购买 或 了 解 各 种 宠物 用 品 信息 ， 。</p> 
<p> 在 这 里 ， 您 可 以 通过 犬 舍 网 ， 。</p> 
</div> 


这 部 分 代码 非常 简单 ， 唯 一 要 注意 的 就 是 第 3 行 的 3， 因 为 在 CSS 文 件 中 ， 已 经 定义 了 一 
个 效果 ， 只 要 在 class 为 izq 的 DIV 下 面 写 入 h3 都 会 引用 这 个 CSS， 其 代码 如 下 所 示 。 


E 


于 
2 
3 
4. 
5 
6 
"| 


dzqh3t 
background-image: none; 
width:307px; <! 宽度 --> 
height:97px; <! 高 度 --> 
text-indent:-5000px; 
background:url(../images/texto-home.jpg) no-repeat; 
} 


可 代码 主要 的 效果 就 是 定义 这 个 h3 的 宽度 高 度 ， 使 它 符合 所 引用 图 片 的 高 度 与 宽度 。 


CE 对 搭建 ”分 类 导航 部 分 的 DIV 


首页 第 一 行 中 间 部 分 的 右边 是 ”分 类 导航 ”部 分 ， 


效果 如 图 4-5 所 示 。 

这 部 分 的 内 容 是 相当 简单 的 ， 所 以 就 不 做 说 明了 ， 
关键 代码 如 下 所 示 。 

1. <divclass="der"> 


2 


5 光 


<p> 想 体会 养 宠物 的 感受 吗 ， 赶 紧 加 入 我 们 吧 ， 
</p> 
<ul id="idList"> 


图 4-5 分 类 导航 部 分 DIV 的 效果 图 
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we <1i><a href="#"> 热 点 宠物 </a></1i> 
5. <li><a hre > 宠物 相册 </a></1i> 
6- <1i><a href="#"> 宠 物 用 品 </a></1i> 
局 <1i><a href="#"> 宠 物 大 全 </a></1Li> 
Se <1i><a href="#"> 会 员 专区 </a></1i> 
9. </ul> 

10. </div> 


对 搭建 ”图 片 欣赏 部 分 的 DIV 


页 第 一 行 左边 最 后 一 部 分 就 是 ”图片 欣赏 ”部 分 ， 这 部 分 的 样式 如 图 4-6 所 示 。 
宠物 佳 图 欣赏 
图 4-6 图 片 欣赏 部 分 的 效果 

下 面 给 出 这 个 DIV 的 关键 代码 。 
1. <divid="muestra"> 
2 <h4></h4> 
3 <a style="position:absolute; top: 35px; left: 490px; font-size:.9em;" 

href="#"> 
4 更 多 宠物 图 片 </a> 
<div class="trabajo"> 
,全 <div class="slide"> 
学 <img src="images/408330.jpg" border="0" /> 
8 </div> 
a <div class="info"> 
YO <p class="cliente"><span> 搞 笑 </span> 猫 咪 欺 负 狗 狗 </P> 
于 <p><span> 成 长 日 记 </span> 我 家 有 宝 初 长 成 </p> 
2 <p><span> 宠 物 供求 </span> 纯 种 大 头 金毛 出 售 <br /> 
JS 各 种 名 犬 现在 7 折 优 惠 <br /> 
Ta 不 掉 毛 的 小 比 能 <br /> 
5 </p> 
16. <p class="ver"><a target=" blank" href="#"> 更 多 供求 信息 </a></p> 
邯 全 </div> 


18. </div> 


QQ、|DIV+CSS 网 站 布局 案例 精粹 (第 2 版 ) 


在 上 述 代 码 中 ， 第 4 行 的 h4 的 定义 方法 和 4.2.2 节 中 的 h3 是 一 样 的 ， 这 里 就 不 再 做 说 明 
了 ， 在 第 5 行 的 代码 中 引用 了 名 为 trabajo 的 CSS， 这 部 分 的 CSS 定 义 了 一 个 背景 图 ， 这 个 背景 
图 正好 就 是 ”图片 欣赏 ”的 外 边框 ， 其 CSS 关 键 代码 如 下 所 示 。 


1 .trabajo { 

和 width:628px; <! 宽度 --> 

height:371lpx; <! 高 度 --> 

4 background:url(../images/fondo-proyecto.jpg) no-repeat; <! 背景 图 
不 拉 伸 --> 


margin:0 0040px; 
padding:21px 0 0 18px; 
1 | 
在 上 述 的 代码 中 ， 以 第 2、3、4 行 的 代码 最 为 重要 ， 其 中 第 2、3 行 代码 中 trabajo 的 高 度 与 
宽度 的 定义 方法 是 与 第 4 行 引 用 的 背景 图 片 有 关系 的 ， 其 高 度 和 宽度 与 图 片 的 高 度 和 宽度 一 
致 ， 这 样 才能 形成 边框 效果 。 


了 生生 搭建 ”联系 方式 部 分 的 DIV 


联系 方式 部 分 位 于 首页 第 一 行 右 边 部 分 的 上 方 ， 在 这 部 
分 中 其 实 包 含有 两 个 部 分 ， 但 都 是 由 图 片 组 成 ， 所 以 把 它们 
放 在 同一 个 部 分 中 了 ， 这 部 分 的 效果 如 图 4-7 所 示 。 

这 部 分 完全 由 图 片 组 成 ， 其 中 每 个 DIV 都 用 CSS 定 义 了 

张 背景 ， 部 分 关键 代码 如 下 所 示 。 
三 to 1. <div class="vcard"> 


es 2. <div id="url"> <a class="url fn" href="index. 
html"></a></div> 


眉 


联系 电话 : 12345678 


<div id="direccion"> 

传真 : 021-12345678 4 <div class="org"> 宗 旨 </div> 

@_mall123@163.com 3 <div class="adr"> 
6. <div class="street-address"> 宗 由 </div> 
<div id="provincia"> </div> 
8 </div> 
9 </div> 
10. <div class="tel" id="tel"> 电 话 </div> 
Es <div class="tel" id="fax"> 传 真 </div> 
E23 <div id="emailc"> 
43- <a class="emailc" href="mailto: 


图 4-7 联系 方式 部 分 的 DIV 效 果 图 
14. </div> 
15. <divid="otto"> 
6s <h4></h4> 
17. </div> 
18. </div> 


上 面 的 代码 比较 简单 ， 主 要 就 是 CSS 定 义 ， 这 里 我 们 就 以 第 3 行 代码 为 例 ， 介 绍 一 下 
CSS，direct 关 键 代码 如 下 所 示 。 


123@163.com">123@163.com</a></div> 


洲 
二 
山 
时 
入 
图 
过 
要 
HH 
办 
司 
其 


二 .vcard #direccion { 
width:217px; <! 宽度 --> 
3 height:91lpx; <! 高 度 --> 
4 background-image: none; 
background:url(../images/vcard-02.jpg) no-repeat; <! 背景 图 片 不 拉 伸 
三 三 = 
6. text-indent:-5000px; 
} 


这 部 分 代码 与 上 一 小 节 的 代码 很 相似 ， 所 以 这 里 就 不 做 说 明了 。 


CE 和 掺 建 ”宠物 故事 ”部 分 的 DIV 
宠物 故事 部 分 由 图 片 加 文字 组 成 的 ， 其 效果 如 


®S 标题 
记录 发 生 在 我 们 身边 宠物 的 事 


小。 


这 部 分 代码 比较 简单 ， 这 里 就 不 再 详细 说 明了 ， 
出 这 部 分 DIV 的 关键 代码 。 


1. <divid="caso"> 
2 <h4></h4> 
3. ”<p> 您 还 可 以 看 到 发 生 在 我 人 身边， 。 </p> i 
4. </div> 
CW 也 挡 建 宠物 信息 ”部 分 的 Dv 


宠物 信息 部 
的 ， 所 以 这 里 就 


CHE 对 搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明 以 及 友情 链接 等 内 容 ， 效 果 如 图 4-10 所 示 。 


分 的 DIV 与 宠物 故事 的 布局 模式 是 相同 
只 给 出 效果 图 ， 如 图 4-9 所 示 。 


网 


4-9 宠物 信息 部 分 的 DIV 


日 2010 保留 一 切 权利 
1 


合作 快 伴 


| 


图 4-10 页 脚 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 代 码 比 较 简单 ， 所 以 就 不 再 做 说 明了 。 


1. <divid="pie"> 

2. ”<p><strong>® 2010 保留 一 切 权利 </strong></p> 

3. ”<p> <a href="#"> 宠 物 网 站 </a> | 

</p> 

5. <p> 合作 伙伴 - <a href="#"> 友 情 1</a> <a href="#"> 友 情 2</a> <a href="#"> 友 情 3</ 
a> <a href="#"> 友 情 5</a></p> 

6. </div> 
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首页 CSS 询 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 下 面 我 们 用 表格 的 形式 描述 
页 中 其 他 CSS 的 效果 ， 如 表 4-2 所 示 。 


DK 


表 4-2 首页 DIV 和 CSS 对 应 关系 一 览 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class="izq"> 定义 这 个 DIV 下 的 H3 自 动 引 用 图 片 
<h3></h3> ‘izq h3 { 
width:307px; 
height:97px; 在 这 里 ， 您 还 可 以 看 到 发 生 在 我 们 
_ 身边 ,感人 的 宠物 故事 。 体 会 定 物 萎 汪 
background:url(../images/ 


给 我 们 带 来 的 快乐 和 悲伤 。 


texto-home.jpg) no-repeat; 


} 
<div id="emailc"> 把 此 DIV 设 置 成 块 ， 并 设置 鼠标 为 手 
型 


#emailca { 


display:block; background- 
image: none; e-maik123@163.com 


background:url(../images/ 


vcard-05.jpg) no-repeat; 


cursor:hand; 
} 
<div class="info">| 定 义 文字 上 不 允许 出 现 浮 动 对 象 
<P class= cliente > .info p.cliente span { 
clear:both; 


color:#429d8e 这 些 文字 上 不 允 
} 许 出 现 浮动 对 象 


4.3 ”首页 特色 


网 


在 首页 中 有 一 大 亮点 ， 第 一 行 的 右边 列 由 图 片 组 成 ， 使 它 看 上 去 像 是 从 页 面 项 部 掉 下 来 
签 ， 这 样 整个 页 面 看 上 去 立刻 就 鲜 活 起 来 ， 其 效果 如 图 4-11 所 示 。 


的 标 


宠物 题材 的 主题 网 站 


联系 电话 : 12345678 


传真 : 021-12345678 


e-mail123@163.com 


图 4-11 分 类 列表 图 
实现 上 图 效果 的 关键 代码 如 下 所 示 。 
1. <divclass="vcard"> 
p <divi url"> <a class="url fn" href="index.html"></a></div> 
3 <div id="direccion"> 
CE <div class="org"> 宗 由 </div> 
5 <div class="adr"> 
6. <div class="street-address"> 宗 则 </div> 
VR <div id="provincia"> </div> 
:加 </div> 
上: </div> 
10. <div class="tel" id="tel"> 电 话 </div> 
11. <div class="tel" id="fax"> 传 真 </div> 
he <div id="emailc"> 
Eh <a class="emailc" href="mailto:123@163.com">123@163.com</a></div> 
14. </div> 


在 上 述 代码 中 ， 需 要 奸 


点 关注 的 是 第 2 行 ， 它 引用 了 一 个 的 ID 为 url 的 CSS， 在 这 个 CSS 


引用 了 一 张 能 看 出 悬挂 效果 的 图 片 ， 其 CSS 代 码 如 下 所 示 。 

1 .vcard #url { 

2 width:217px; 

3 height:165px; 

4. background:url(../images/vcard-01.jpg) no-repeat; 

5 text-indent:-5000px; 

6. } 

这 部 分 代码 其 实 是 比较 简单 的 ， 但 是 正 是 由 这 些 简 单 的 代码 ， 组 成 了 一 个 非常 有 特色 的 
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4.4 宠物 社区 页 面 


网 


在 宠物 社区 页 面 中 ， 使 用 图 片 加 文字 的 形式 介绍 宠物 食品 。 由 于 每 个 食品 介绍 DIV 的 样 
式 非常 相似 ， 所 以 我 们 就 通过 一 个 DIV 来 分 析 实现 方法 ， 这 个 DIV 的 效果 如 图 4-12 所 示 。 


美国 绿 的 洁 齿 骨 小 号 


| 


/ 济 


4-12 宠物 食品 的 效果 


这 个 页 面 的 关键 代码 如 下 所 示 ， 其 中 ， 在 第 2~8 行 的 DIV 里 ， 编 写 了 右边 的 文字 部 分 代 


码 ， 而 在 第 11 行 里 ， 放 置 了 图 片 部 分 的 代码 。 
1. <divclass="muestra-trabajo"> 
2 <div class="nombre-cliente"> 
35 <al> 
4. <1i><a href="#"> 关 注 家 长 : 1869 </a></1i> 
5 <1i>30/ 支 </1i> 
6. </ul> 
1 <h4> 美 国 绿 的 洁 齿 骨 小 号 </h4> 
8. </div> 
SS <div class="flash"> 
10. <div id="demo"> 
ls <img src="images/003.jpg" style="float :left" /> 
25 <div style="float :right; margin-right:20px"> 
区 <p> 市 场 价 : 至 480.00 元 </p> 
14. <p> 商 城 价 : 至 400.00 元 </p> 
15. <p> 会 员 价 : 于 360.00 元 </p> 
16- </div> 
FE </div> 
人 : 调 </div> 
19. </div> 


温馨 怡 人 的 电影 网 站 


电影 网 站 更 新 速度 快 ， 收 录 最 新 上 了 映 的 电影 信息 ， 并 且 提 供 搜索 工具 ， 
方便 观众 自由 搜索 。 另 外 ， 网 站 还 为 观众 提供 热门 电影 排名 ， 观 众 可 以 轻松 
观看 目前 最 受 欢迎 的 电影 。 在 收看 每 一 部 影片 之 前 ， 本 网 站 都 对 该 片 进行 了 
简要 的 介绍 ， 使 您 在 观赏 之 前 便 有 了 大 致 的 了 解 ， 提 高 观赏 兴趣 ， 同 时 还 能 
使 观众 有 选择 的 观看 。 电 影 网 就 像 是 一 个 网 络 电影 院 ， 丰 富 着 您 的 视听 生活 
和 娱乐 休闲 生活 。 

在 这 个 章节 里 ， 我 们 将 分 析 一 个 电影 网 站 的 实现 方式 ， 这 个 网 站 里 ， 我 
们 将 给 出 首页 、“ 新 片 介绍 ”和 “博客 ”三 个 页 面 ， 由 于 篇 幅 的 关系 ， 本 章 
只 详细 讲述 前 两 个 页 面 。 


5.1 ”网 站 页 面 效 果 分 析 


这 个 电影 网 站 的 风格 是 温 芯 怡 人 ， 所 以 其 中 网 站 背景 的 搭建 尤其 关键 ， 而 且 需 要 通过 比 
较 多 的 电影 海报 与 简介 信息 来 吸引 访问 者 的 眼球 。 

在 本 章 中 ， 将 着 重 分 析 首页 和 新片 介绍 的 设计 样式 ,而 博客 页 面 的 代码 的 风 
格 非常 简单 ， 本 章 就 不 再 展开 说 明 ， 这 部 分 的 代码 请 大 家 自行 从 与 本 书 配套 的 下 载 资源 中 获 
取 。 


古村 首页 效果 分 析 


电影 网 站 的 首页 效果 如 图 5-1 所 示 ， 它 是 一 个 三 行 的 布局 样式 ， 在 第 一 行 里 ， 放 置 了 网 站 
的 Logo 图 片 ， 在 第 二 行 里 ， 又 分 别 放置 了 网 站 导航 、 新 片 导 视 、 最 新 影评 这 几 个 元 素 ， 而 在 
最 后 一 行 网 站 页 脚 部 分 里 ， 放 置 网 站 的 导航 信息 和 版 权 信息 。 

在 第 二 行 框架 里 ， 包 括 了 交友 网 站 的 主体 部 分 ， 这 部 分 又 分 为 三 行 ， 分 别 是 第 一 行 的 电 
影 Logo 和 影 人 介绍 ， 第 二 行 的 网 站 导航 ， 第 三 行 的 主体 内 容 。 
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在 线 订 票 


最 新 影评 


祖 汉 丙 的 电影 


其 H 哈 利 演 特 [全 文 ] 


我 要 期待 ,可 现在 为 什么 设 动静 了 [全文 ] 


祖 扰 看 看 生命 的 种 种 意义 [全文 ] 


一 浪 开 怀 大 


很 基 竺 ,我 人 样 的 本 子 ， 什 么 时 候 能 
中 国 


pt nt Rr a > 主体 部 分 DIV， 包 含 了 影片 介 
村 绍 ,最 新 影 ， 网 站 导航 等 部 | 


电影 图 上 


网 


5-1 首页 的 效果 图 


到 对 新片 介绍 页 面 的 效果 分 析 


新 片 介绍 页 


回 


大 致 上 也 采用 了 三 行 的 样式 ， 如 


网 


5-2 所 示 ， 第 一 第 三 行 的 样式 与 首页 相 


将 分 析 这 个 页 


可 
回 


映 日 基 
看 | 


映 日 期: 2010 
看 | 影片 点 评 


第 5 章 


温馨 怡 人 的 电影 网 站 


包含 了 两 个 大 列 ， 第 一 列 是 新 片 介绍 ， 而 第 二 列 见 


H 


的 效果 ， 与 首页 完全 相同 的 部 分 我 们 就 不 


族 神 之 战 -新 片 


网 


5-2 新 片 介绍 页 面 的 效果 


区 | 


下 全 网 站 文件 综述 


是 网 站 推荐 影片 。 


讲述 。 


这 个 网 站 里 ， 除 了 上 文 里 提 到 的 首页 和 新 片 介 绍 页 面 外 ， 还 包含 博客 页 面 ， 而 这 些 
页 面 中 所 用 到 图 片 、CSS 文 件 和 JS 代码 ， 将 分 别 保存 在 images、css 和 js 目录 里 。 文 件 及 其 功 
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能 如 表 5-1 所 示 。 
表 5-1 电影 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
|showhtml 新 片 介 绍 页 面 
| blog html 博客 页 面 
css 目 录 | 区 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 | 这 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


5.2 规划 首页 的 布局 


在 上 一 节 中 ， 我 们 已 经 介绍 了 切 图 的 方法 ， 本 节 我 们 直接 进入 到 设计 步骤 ， 设 计 的 时 候 
还 是 按照 老 规矩 ; 先 用 DIV 构建 总 体 框架 ， 随 后 再 细 分 ， 最 后 用 CSS 和 JS 实现 动态 效果 。 


首页 页 头 的 DIV 


上 节 我 们 已 经 分 析 了 ， 首 页 大 致 上 可 以 分 为 三 行 ， 其 中 第 一 行 是 页 头 ， 只 包含 Logo 图 
片 ， 页 头 DIV 的 设计 效果 如 图 5-3 所 示 。 


站 


图 5-3 首页 页 头 的 DIV 设计 分 析 


| 


实现 页 头 部 分 的 关键 代码 如 下 所 示 。 
<div id="logo"><ahref="index.html"> 电 影 网 </a></div> 


在 上 面 代 码 中 虽然 没有 直接 的 图 片 链接 ， 但 是 图 片 定 义 在 CSS 里 ， 这 会 在 下 文中 详细 说 
明 的 。 


信息 搭建 首页 主体 部 分 的 DIV 


按照 前 文 的 思路 ， 我 们 还 是 用 DIV 的 方式 构建 首 
复杂 ， 我 们 分 开 氢 述 ， 第 一 部 分 的 效果 如 图 5-4 所 示 。 


主体 部 分 的 DIV、 主 体 部 分 的 DIV 比较 


人 
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5-4 首页 主体 部 分 的 上 面部 分 DIV 效 果 


网 


从 上 图 可 以 看 出 ， 第 一 部 分 是 由 上 面 的 影 人 介绍 和 Logo 加 上 下 面 导航 栏 部 分 组 成 的 ， 下 
而 我 们 分 别 介绍 各 个 DIV 的 实现 方式 。 

第 一 部 分 的 DIV 模 块 的 关键 代码 如 下 所 示 。 

1. <! 影 人 介绍 和 Logo 部 分 --> 

2. <divclass="dinpattern"> 

3. <ahref="#"><img src="images/logo-dinpattern.gif"alt="" border="0" /></ 
a><br /> 

4. 看 电影 ， 找 电影 网 <a href="#"> 电 影 网 </a> 

Se </div> 

6. <divid="headline"> 

Se <hl></h1> 

8. 好 电影 尽 在 电影 网 , 作为 人 们 对 于 好 莱 坞 怀旧 记忆 的 一 部 分 ， 保 罗 * 纽 曼 

9. </div> 

10:。 <!== 导航 栏 部 分 ==> 

11. <divclass="nav-holder"> 

2 <ul id="nav"> 

:民风 <1i id="nav0l" class="nav0lon"><a href="#"> 首 页 </a></1i> 

14. <1i id="nav02"><a href="#"> 关 于 我 们 </a></1i> 

IS <li id="nav03"><a href="show.html"> 新 片 介绍 </a></1i> 

6 <li id="nav04"><a href="#"> 所 有 影片 </a></1i> 

We <1i id="nav05"><a href="blog.html"> 博 客 </a></1i> 

18. <1i id="nav06"><a href="#"> 在 线 订 票 </a></1i> 

19. <1i id="nav07"><a href="#"> 联 系 我 们 </a></1i> 

205 </ul> 

21s < /diy 


在 上 述 代 码 中 ， 通 过 第 2~5 行 的 代码 ， 引 入 
Logo 部 分 的 图 片 ， 随 后 ， 在 第 7 行 中 引入 了 一 张 图 


片 ， 第 8f 


了 显示 了 电影 人 介绍 部 分 的 内 容 。 


自由 


这 是 首页 主体 左边 部 分 其 中 的 一 小 块 ， 为 了 
节省 篇 幅 ， 这 里 就 不 做 大 的 截图 了 ， 只 是 把 重要 的 
DIV 的 代码 展示 给 大 家 ， 代 码 如 下 所 示 。 


主体 左边 部 分 ， 其 效果 如 图 5-5 所 示 。 


网 


5-5 首页 主体 左边 部 分 的 DIV 效 果 


网 
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<div class="column-left"> - 中 间 部 分 代码 在 下 面 </div> 
这 个 DIV 定义 了 首页 左边 部 分 的 宽度 ， 这 里 就 不 详细 说 明了 ， 下 面 是 图 5-5 效 果 的 详细 
代码 。 


1. <div class="featured-1"><a href="#"><img src="images/thumbs/annual- 
reports.jpg" border="0" /></a> 


2. <p><strong> 魔 法 保姆 麦克 菲 2</strong><br /> 

3. 一 部 该 谐 幽默 的 《魔法 保姆 麦克 菲 》 。</p> 

4. <div class="details"> 类 型 ， 奇幻 / 喜剧 上 映 日 期 2010 年 3 月 26 日 英国 <br /> 
5. <a href="#"> 查 看 </a> &nbsp; | &nbsp; <a href="#"> 点 评 影片 </a> 

6. </div> 

i <div class="shop show"> 

8 . <p> 电 影 图 片 </p> 

ge <img src="images/201016103024.39591941 75X75.jpg" border="0" /> 
天 办 

和 </div> 

12. </div> 


上 述 代 码 中 ， 只 用 一 个 DIV 就 把 这 个 电影 的 简介 给 全 部 说 明了 ， 其 他 几 个 DIV 与 这 个 
非常 相似 ， 所 以 这 里 就 不 再 重复 说 明了 ， 相 关 代码 可 以 从 与 本 书 配套 的 下 载 资源 中 获取 。 
在 首页 左边 部 分 还 有 两 个 小 部 分 要 介绍 一 下 ， 如 图 5-6、 图 5-7 所 示 。 


新 片 导 视 更 多 有 


出 


5-6 首页 主体 部 分 头 DIV 效 果 


| 


图 5-7 首页 主体 部 分 脚 DIV 效 果 图 


在 上 面 两 个 图 中 ， 这 两 个 效果 实现 都 是 比较 简单 的 ， 所 以 下 面 就 一 起 介绍 给 大 家 吧 ， 
实现 代码 如 下 所 示 。 


LE 
2. <divclass="featured"><a href="show.html"> 更 多 新 片 &raquo; </a></div> 
3. <!-- 尾部 分 DIV --> 


<div id="banner"><a href="#"> 还 在 为 找 不 到 电影 而 发 悉 ? 还 在 为 没 能 买 到 电影 票 而 苦 
恼 ? 还 宪 为 没 能 址 上 亲族 首届 和 填 以 ? 上 电影 网 帮 你 解决 所 有 问题 ! ! </a></div> 
这 两 个 DIV 其 实 都 是 用 了 同一 个 特性 ， 就 是 都 使 用 了 背景 图 ， 图 5-6 的 ”新 片 导 视 和 图 
5-7 左 边 部 分 的 图 片 都 是 用 背景 图 来 实现 的 。 
首页 主体 部 分 右边 DIV 则 是 由 一 个 大 的 DIV 包含 头 部 分 DIV 和 正文 部 分 DIV 两 部 分 组 成 ， 
如 图 5-8 所 示 。 
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图 5-8 影评 部 分 DIV 效果 


网 


在 上 图 中 ， 由 于 篇 幅 问题 只 给 出 了 部 分 图 片 ， 这 部 分 的 详细 代码 如 下 所 示 。 


1. <divclass="column-right"> 

说 <div class="latest-entries">gnbsp;</div> 

| <ul id="latest-entries-list"> 

4 <1i><a href="#"> 很 温 声 的 电影 [全 文 ] 

Sp &raquo; <br /> 

6 <span class="inline-date">raul77 ( 布 里 斯 班 ) </span></a></1i> 
7 <1i><a href="#"> 甚 比 哈 利 波 特 [全 文 ] 

8 &raquo; <br /> 


9: <span class="inline-date"> 埃 宁 斯 (墨尔本 ) </span></a></1i> 

10. <1i><a href="#"> 感 觉 还 行 ， 但 是 比较 起 来 ， 还 是 更 喜欢 how to train your dragon [ 
全 文 ] sraquo; <br /> 

3 <span class="inline-date">teninches (重庆 ) </span></a></1i> 

12 

L133 “</ul> 

14. </div> 


在 上 述 代码 中 ， 头 部 分 DIV 其 实 与 主体 左边 部 分 DIV 的 头 样 式 相同 ， 都 使 用 了 背景 图 片 
作为 显示 方式 ， 所 以 在 代码 中 看 不 到 引用 的 图 片 在 哪里 。 

而 在 正文 部 分 DIV 中 则 使 用 如 第 3 行 的 ul 标签 和 如 第 4 行 的 i 标签， 使 它 的 效果 看 
上 去 特别 整齐 。 


《和 搭建 页 脚 部 分 的 DIV 


电影 网 站 的 页 脚 部 分 DIV 比较 简单 
所 示 。 


主要 是 显示 一 些 导航 菜单 和 版 权 信 息 ， 效 果 如 图 5-9 


图 5-9 页 脚 部 分 的 DIV 设计 


这 部 分 的 实现 代码 如 下 所 示 ， 代码 比较 简单 ， 所 以 不 再 详细 解释 。 


1. <divid="footer"> 
2 <a href="index.html"> 首 页 </a> &nbsp; |&nbsp; <a href="#"> 关 于 我 
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们 </a> gnbsp; |&nbsp; <a href="show.html"> 新 片 速 递 </a> gnbsp; | &nbsp; <a href="#"> 博 
客 </a> gnbsp; |&nbsp; <a href="#"> 所 有 影片 </a> gnbsp; | &nbsp; <a href="#"> 法 律 条 款 </a> 


&nbsp; | &nbsp; <a href="#"> 联 系 我 们 </a><br /> 


人 &copy; 2009 <a href="index.html"> 电 影 网 </a> 版 权 所 有 保留 一 切 权利 
4. </div> 
上 面 代 码 中 DIV 设 置 了 一 下 宽度 ， 使 之 与 上 面 的 部 分 能 够 对 齐 。 


了 对 首页 CSS 效 果 分 析 


在 前 面 描 述 DIV 的 时 候 ， 我 们 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 5-2 所 示 。 


已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 


表 5-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div id="1logo"><a| 一 张 图 片 实 现 的 动态 效果 ， 
href= "index.html"> 电 影 网 | 如 右 栏 的 两 个 图 所 示 ， 这 两 种 效 
</a></div> 果 其 实 一 张 图 片 制造 出 来 的 

#logo a { 


background:url(../images/ 
logo.gif) no-repeat 0 0; 
} 
#logo a:hover { 
background:url(../images/ 
logo.gif) no-repeat 0 -35px; 
} 


鼠标 移 开 时 的 效 
果 


鼠标 移 上 去 时 的 


<div id="headline "> 
<hl></hl> 


只 要 在 ID 为 headline 的 DIV 里 使 用 
<h1>， 就 会 出 现 如 此 效果 
#headline hl { 
display:block; 
height:56px; 
width:347px; 
font-size:10px; 
overflow:hidden; 
text-indent:-400px; 
background:url(../images/ 
home-headline.gif) no-repeat; 


margin:0 0 12px; 


二 内 使 用 H1 时 ， 自 动 出 现 
的 效果 
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( 续 表 ) 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div class= "featured "> 是 用 这 张 图 作为 背景 图 ， 并 使 之 
右 对 齐 ， 且 不 拉 伸 
.featured { 


text-align:right; 


font-size:11px:; 


background:url(../images/ 
txt-featured.gif) no-repeat; 


padding-bottom:20px:; 


<div class="featured-1"> 设置 此 DIV 的 宽度 并 设置 其 中 的 
体 颜 色 ， 字 体 大 小 ， 行 间距 等 
.featured-1{ 

width:280px; 


color:#dedede; 


font-size: 11px; 
line-height:18px; 
padding-bottom:30px; 


5.3 ”在 首页 中 实现 动态 效果 


在 这 个 电影 网 站 中 ， 使 用 了 一 个 构思 比较 奇特 的 CSS 来 定义 网 页 的 动态 效果 。 主 要 体 
现在 两 个 方面 ， 第 一 ， 当 鼠标 移 到 网 站 Logo 上 时 ， 网 站 Logo 能 动态 的 变换 颜色 ， 如 图 5-10 
所 示 。 


鼠标 移 上 去 时 的 


第 二 ， 当 鼠标 移 到 ”导航 栏 ”里 时 ， 导 航 栏 里 的 文字 会 有 凸 出 来 的 效果 ， 如 图 5-11 所 


图 5-10 动态 更 新 网 站 字体 的 示意 图 


示 ， 比 如 鼠标 移 到 “新片 介绍 上 时 ， 新 片 介绍 会 有 凸 出 来 的 效果 。 
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新 片 介绍 5 国 2 到 和 ' 新 片 介 各 区 饼 标 移 上 去 效果 


图 5-11 导航 栏 的 不 同 效果 


《王国 变换 Logo 颜 色 的 方法 


为 了 实现 更 改 logo 颜 色 的 效果 ， 我 们 需要 在 CSS 里 定义 如 下 的 代码 : 


1. <! -- 鼠标 移 开 效果 -> 
2. #logoaf{ 

3 display:block; 
4. height:35px; 
SS width:153px; 
6 
7 
8 
| 


overflow:hidden; 

text-indent:-400px; 

font-size:10px; 
background:url(../images/1ogo.gif) no-repeat 0 0; 


} 
11. <! -鼠标 移 上 去 效果 -- > 

12. #1lo0go a:hover { 

诺 乓 background:url(../images/1ogo.gif) no-repeat 0 -35px; 

14. } 

其 中 ， 在 第 3 行 定义 了 这 个 logo 是 不 管 怎样 都 是 显示 的 ， 第 4~6 行 ， 定 义 了 logo 的 宽度 与 
高 度 ， 并 且 当 超过 这 个 数值 时 ， 其 内 容 会 被 自动 修剪 并 内 容 不 可 见 。 

这 些 代码 的 重点 就 是 第 9 行 和 第 13 行 ， 注 意 代码 引用 的 图 片 是 同一 个 图 片 ， 但 是 却 实现 
了 换 图 的 效果 ， 这 就 归功 于 第 13 行 代码 的 最 后 一 段 -35px ， 这 句 话 的 意思 表明 了 将 此 图 片 
移 位 35 个 像素 ， 从 而 实现 了 Logo 图 片 的 更 换 。 

定义 好 CSS 代 码 后 ， 在 首页 的 里 ， 通 过 如 下 的 代码 就 能 引入 更 改 Logo 效 果 的 CSS 方 法 : 
<div id="logo"><a href="index.html"> 电 影 网 </a> 在 ID 为 logo 的 DIV 下 使 用 超 链 就 能 实现 此 效 
果 。 


CED 实现 导航 呈 出 的 效果 


我 们 可 以 通过 下 面 的 代码 ， 实 现 鼠 标 移 上 去 后 导航 栏 凸 出 的 效果 。 
首先 定义 导航 栏 的 文字 ， 下 面 我 们 就 给 出 一 个 范例 ， 代 码 如 下 所 示 。 


<div class="nav-holder"> 
<ul id="nav"> 
<1i id="nav01" class="nav0lon"><a href="#"> 首 页 </a></1i> 
<1i id="nav02"><a href="#"> 关 于 我 们 </a></1i> 
<1i id="nav03"><a href="show.html"> 新 片 介绍 </a></1i> 


</ul> 
- </div> 


ovwau 必 wm 
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这 里 要 注意 的 就 是 i 的 ID 要 与 CSS 中 的 定义 相对 应 ， 不 能 吉 


al 


定义 ， 其 CSS 实 现代 码 如 下 


1. #navt{ 

2 width:840px; 

3 height:52px; 

4 margin:0; 

5 padding:0; 

6 position:relative; 

革 background:url(../images/nav.gif); 
有 


#navo3 { 
用 text-indent:-300em; 
了 overflow:hidden; 
2 left:0px; 
13 width:120px; 
14.} 
15. #nav03 a:hover { 
16: background:transparent url(../images/nav.gif) Opx -104px no-repeat; 
LE 
上 面 代码 使 用 多 重 CSS 相 互 结合 ， 从 而 实现 导航 栏 文字 凸 出 效果 ， 其 重点 在 第 16 行 ， 医 
为 li 定义 了 ID 为 nav03， 所 以 当 鼠 标 移 上 去 时 ， 只 要 有 nav03 的 1i 的 文字 会 显示 凸 出 效果 。 
AAA 召 
5.4 ”新片 介绍 页 面 
新 片 介绍 页 面 主要 用 于 显示 新 片 速递 的 信息 ， 包 括 电 影 列 表 、 最 新 影评 和 电影 导航 等 部 


分 的 模块 ， 每 个 模块 使 用 DIV 的 方式 实现 。 


MT 电影 列表 的 DIV 


这 里 我 们 需要 实现 如 下 的 特 
色 : 第 一 ，DIV 作 为 单独 一 个 影 
片 信息 的 父 类 容器 ， 里 包 有 图 片 
锚 点 、 标 点 和 影片 介绍 的 段落 以 
及 上 映 日 期 、 查 看 和 影评 的 详 绢 
信息 DIV， 如 图 5-12 所 示 。 pr 

接 下 来 我 们 将 使 用 CSS 对 其 
进行 样式 规则 定义 ， 代 码 如 下 所 


不 。 


， 园 为 全 的 风头 


别 


到 5-12 电影 列表 的 DIV 效果 展示 


61 


|DIV-+C SS 网 站 布局 案例 精粹 (第 2 版 ) 


a> 


1. <divclass="port-sample"> 
2. <a href="#"><img src="images/thumbs/annual-reports.jpg" border="0" /></ 


3 <p><strong> 魔 法 保姆 麦克 菲 2</strong><br /> 
4 影片 介绍 :一 部 底 谐 幽默 的 《魔法 保姆 麦克 菲 》 

5 <div class="details"> 

6- 上 映 日 期 : 2009-10-20<br /> 

1 <a href="#"> 查 看 </a> &nbsp; | gnbsp; 

8 <a href="#"> 影 片 点 评 &raquo;</a> 

9 </div> 

LUO </diy> 


这 里 由 于 多 部 电影 的 样式 都 是 类 似 的 ， 所 以 我 们 只 分 析 第 一 部 电影 信息 的 代码 。 
从 上 述 代码 中 不 难 发 现 ， 作 者 以 简介 的 代码 方式 设计 该 区 域 ， 这 样 设计 有 两 个 原因 ， 第 


一 将 表现 和 设计 相 分 离 ， 这 是 设计 师 通常 使 用 设计 的 方法 。 第 二 代码 结构 简单 易 懂 ， 让 人 一 


了 然 。 下 面 我 们 看 一 下 CSS 部 分 实现 代码 。 


1. .port-sample { 

2 padding-bottom:30px; 

x Pe 

4. .details{ 

5 margin-top:8px; /* 定 义 外 边 距 */ 

6 padding:4px 0; /* 定 义 内 边 距 */ 
border-top:1px solid #4f4f4f; /* 定 义 边框 宽度 和 颜色 */ 
| 

9. .port-sampleai{ 

10. color:#fff; /* 定 义 颜色 */ 

La 

12. .port-sample a:hover { /* 定 义 鼠标 悬浮 效果 */ 
3 text-decoration:none; 

La 


首先 对 父 类 容器 port-sample 设 计 ， 代 码 的 第 2 行 里 ， 我 们 定义 了 内 边 距 ， 即 定义 这 个 DIV 


距离 顶端 30 个 像素 。 而 在 第 4 行 的 details 样 式 里 ， 我 们 定义 了 影评 文字 部 分 的 样式 ， 在 第 7 行 
里 定义 边框 的 颜色 和 宽度 。 最 后 ， 在 第 12 行 里 定义 了 鼠标 悬浮 ”的 效果 样式 。 


到 对 最 新 影评 的 DIV 


整个 新 片 介绍 页 面 的 右 半 部 分 只 显示 影评 列表 ， 该 
区 域 采 用 了 常用 的 高 亮 效 果 ， 排 版 简单 、 清 爽 ， 最 简单 
的 更 改 背景 色 的 方法 ， 给 用 户 一 个 不 错 的 交互 体验 ， 如 图 
5-13 所 示 。 

实现 此 部 分 的 DIV 代码 如 下 所 示 。 


鼠标 选中 的 样式 


四 


5-13 列表 的 高 亮 显示 效果 
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1. <divid="tabs"> 
之 <ul id="latest-entries-list"> 


3 <1i id="tabHeaderl" class="currenttab"><a href="JavaScript:void(0)" 

ick="toggleTab (1,3) "> <span> 诸 神 之 战 graquo; <br /> 

4. <span class="inline-date"> 上 了 映 日 期 : 2010-3-26</span></span></a></1i> 

全 <1i id="tabHeader2" ><a href="JavVvaScript:void (0)" 
onClick="toggleTab (2,3)" ><span> 铁 血战 士 &raquo; <br /> 

6 <span class="inline-date"> 上 映 日 期 : 2010-7-7</span></span></a></1i> 

je <1i id="tabHeader3" ><a href="JavaSscript:void(0)" 
onclick="toggleTab (3, 3)"><span> 热 带 惊 雷 &raquo; <br /> 

号 <span class="inline-date"> 上 映 日 期 : 2010-3-21</span></span></a></1i> 

9. 省 略 其 他 相似 的 代码 

Os 

ls </ul> 

12. </div> 


上 面 的 代码 由 dl 和 li 组 成 。 请 注意 ， 在 代码 的 第 1 行 里 ， 是 在 ul 外 部 加 上 div， 而 真正 的 列 


表 设 计 只 对 ul 和 li 进行 定义 的 。 


top: 


1. #latest-entries-list {padding: 0; margin: 0;} 

2. #latest-entries-list 1i {padding:0; margin:0; list-style:none; border- 
lpx solid #4f4f4f; } 

3. #latest-entries-list .selected {background-color:#300912;} 

4. #latest-entries-lista {display:block; padding:1l0px; font-size:l1llpx; 


color:#e6e6e6; line-height:16px; width:230px; text-decoration:none;} 


5. #latest-entries-lista:hover { color:#fff; background-color:#191919; } 
6. #latest-entries-lista .inline-date { color:#b0b0b0; font-size:10px; } 


上 述 代 码 中 ， 第 1、2 行 对 ul 和 li 的 外 边 距 和 间隔 设置 为 空白 ， 并 对 li 的 上 边框 设置 为 1 像 
色 实 线 。 而 第 3、4 行 对 ui 下 的 伪 类 #astest-entries-list .selected 定 义 当 鼠 标 移动 到 某 项 时 背 


景 颜 


色 变 为 深 色 。 
上 述 代码 简单 ， 又 能 增加 很 棒 的 


洒 


户 体验 ， 这 种 小 技巧 在 实际 开发 中 经 常 使 用 到 。 


ER 电影 导航 的 DIV_ 


一 种 


导航 目录 在 网 页 设计 中 也 是 经 常 使 用 的 
显示 排版 方式 ， 如 图 5-14 所 示 。 
导航 通常 放 在 页 下 方 ， 当 用 户 浏览 


团 


页 面 
般 3~4 列 。 设 计 的 关键 在 于 控制 好 外 边 距 即 
可 ， 代 码 如 下 所 示 。 


下 方 的 时 候 ， 提 供 快 捷 的 导航 方式 ， 一 


图 5-14 导航 目录 
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1. <divclass="other"> 

过 <p> &nbsp; <a href="#" style="color:#FFFFFF"> 更 多 ggt; &gt;</a></p> 
3 <ul> 

“人 <1i><a href="#">&raquo; 欧美 影片 </a></1i> 

5. <1Li><a href="#">&raquo; 日 韩 影片 </a></1i> 

6 <1Li><a href="#">&raquo; 国内 影片 </a></1i> 

7 <1i><a href="#">&raquo; 其 他 国家 影片 </a></1i> 

8 /ul 

上 <ul> 


10. <li><a href="#">&raquo; 最 新 上 映 </a></1i> 
11. <li><a href="#">&raquo; 经 典 电影 </a></1i> 
12. <li><a href="#">&raquo; 最 新 预告 </a></1i> 
L135 “</ul> 
14. </div> 


在 第 1 行 的 代码 中 ， 我 们 使 用 ID 为 other 的 CSS 进 行 位 置 定 位 ， 这 里 ul 和 li 也 是 用 于 显示 每 
一 级 导航 栏 。 
1. .other {font-size:11lpx; line-height:18px;color:#fff;} 


2. .other ul {float:left;margin:8px 12px 0 0;width:200px;padding:0;border- 
top:lpx solid #4F4F4F;} 


3. .other li {list-style:none; margin:0;padding:0;} 

4. .otherlia{ display:block; width:190px; padding:4px 8px; 
SOLGr "ECE 

5. .otherlia:hover{ text-decoration:none; background:#000;} 


这 里 要 注意 ， 第 2 行 里 ，other ul 使 用 了 浮动 从 左边 开始 。 而 在 第 4 行 里 ， 通 过 padding 定 义 
外 边 距 为 8 像素 ， 顶 边框 为 灰色 ， 而 在 第 5 行 里 ， 定 义 了 选中 不 使 用 样式 ”的 list-style:none 
代码 ， 高 亮 的 效果 如 图 15-15 所 示 。 


图 5-15 选中 效果 的 高 清 图 


CQ 
导游 推广 为 一 体 的 G 
海洋 公园 网 站 


主题 公园 是 一 个 娱乐 性 非常 强 的 旅游 景点 ， 它 不 仅 具 有 强烈 的 特色 ， 而 
且 与 普遍 的 游园 方式 相 结合 ， 能 适应 多 种 消费 人 群 。 

这 类 网 站 有 如 下 特点 ， 第 一 ， 由 于 具有 推广 功能 ， 所 以 要 尽 可 能 多 地 说 
明 本 公园 的 特点 ， 第 二 ， 由 于 主题 公园 主要 依靠 园 内 的 娱乐 设施 盈利 ， 所 以 
更 要 在 网 站 里 提供 充分 的 导游 信息 。 本 章 ， 我 们 就 以 海洋 公园 为 例 ， 分 析 一 
下 这 类 网 站 的 实现 方式 。 


6.1 网 站 页 面 效 果 分 析 


本 章 ， 将 着 重 分 析 海 洋 公园 网 站 的 首页 和 ”公园 导游 ”页 面 的 设计 样式 ,而 ”娱乐 项 
介绍 ”的 页 面 设计 虽然 也 很 精致 ， 但 风格 也 与 前 两 个 页 面 很 相似 ， 所 以 就 不 再 重复 分 析 了 。 


首页 如 


海洋 公园 的 首页 布局 虽然 篇 幅 不 大 ， 但 结构 紧凑 ， 包 含 的 要 素 比 较 多 ， 我 们 设计 时 采 
行 的 样式 。 
其 中 ， 第 一 行 里 放置 网 站 Logo、 园 内 搜索 模块 和 导航 菜单 模块 。 第 二 行 里 放置 ”主题 图 
片 和 ”最 新 公告 ”二 大 部 分 。 第 三 行 里 放置 海洋 公园 的 介绍 模块 和 导航 模块 ， 第 四 行 是 首 
页 页 脚 部 分 ， 页 脚 不 仅 包 含 了 导航 菜单 ， 还 见缝插针 地 放置 了 一 些 广告 文字 。 
于 本 公园 是 海洋 性 的 旅游 景点 ， 所 以 背景 色 不 宜 过 于 浓艳 ， 最 好 搭配 海洋 景观 比较 自 
然 ， 首 页 的 效果 如 图 6-1 所 示 。 


T 


kk 


| 9 
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第 一 行 ， 放 置 
Logo 和 导航 荣 单 


在 线 可 票 | 立即 注册 | 登录 


订 票 规则 
个 人 订 票 
团体 订 票 


计划 行程 ”海洋 趣味 ”全 年 入 场 券 ” 同 乐 会 | 


请 大 家 一 起 支持 海洋 公园 每 着 星 则 一 
pl Tl 


新 海洋 公园 开发 计划 
们 要 打造 更 好 ， 更 好 阮 的 海洋 公园 (. 


游乐 设施 介绍 


pa 让 你 可 于 水 中 
让 相生 村 沁 9 滞 如， 近 第 
接触 及 喂食 它们 ， 你 会 发 现 海豚 更 
真 更 可 爱 的 一 面 


》> 槛 后 之 旅 
b》 能 猪 护理 员 
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全 年 入 场 券 
全 年 入 场 券 续 寓 


# 生日 派对 
# 创意 婚礼 


展 户 未 来 


独 有 的 诲 洋 列车 格 载 你 从 海滨 乐 园 轻松 往返 
高 峰 乐 园 。 在 短 短 三 分 钟 的 旅程 当中 ， 你 更 
可 以 体验 深海 世界 的 神秘 国度 【〔.. 详细 ) 


园 于 哆 上 六 时 后 可 租用 和 
举办 员工 联 会 、 ie 
享用 园 内 各 项 设施 。(.. 详细 ) 


海洋 公园 指南 | 联系 我 们 | 人 才 招聘 | 最 新 通 上 | 最 新 活动 | 订 票 中 心 | 题 
2010 保留 一 切 权利 


图 6-1 首页 效果 图 


《取胜 导游 页 面 的 效果 分 析 
在 导游 页 面 中 放置 海洋 公园 的 娱乐 项 


， 以 起 到 导游 作用 。 


这 个 页 面 采用 的 是 三 行 样 


式 ， 其 中 ， 第 一 行 和 Was me 完全 一 致 的 ， 都 放置 了 页 头 和 页 脚 ， 而 在 第 二 行 
里 放置 了 针对 海洋 公园 的 娱乐 项 目 ， 这 个 页 面 的 主体 效果 如 图 6-2 所 示 ， 其 中 和 首页 相同 的 部 
分 没有 给 出 。 
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首页 * 娱乐 项 目 


中 并 | 履 来 自 北极 的 精灵 宝贝 ， 白 鲜 1 
欢迎 光临 我 们 的 最 新 项 目 入 关 1 


游乐 园 是 一 家 集 各 种 动物， 海洋 生物 ， 各 戏 ， 和 餐厅 ， 和 连锁 店 ， 购 物 中 
心 与 一 体 的 综合 性 落 乐园 着 因 更 皮 雁 : 区 企 志 廊下 襄 乓 天 这 
而 不 可 所 河内 更 尼 。 一 光 7 
海洋 游乐 园 拥 有 全 东南 亚 景 大 的 海洋 水 族 馆 及 主题 游乐 园 ， 赁 山 履 海 ， 筷 旋 元 次， 是 访 港 放 客 景 要 下 一 这 廊 古 启 -由 天 光 一 必 全 导 
光 呈 的 地 方 。 在 这 里 不 仅 可 以 看 包 牌 味 十 足 的 长 天 游乐 场 ， 霉 肿 表 帝 ,还 有 千 衣 百 怪 的 海洋 性 鲁 大 万 人 村, 因此 年 诬 二 了 ND 百人 
甘 、 高 符 入 云 的 海洋 摩天 增 ， 更 有 昼 险 利 烛 的 起 矿 飞车 、 航 过 之 旋 ， 浇 称 科 短 、 观 光 、 娱 攻 全 7 
组 全 
北 枫 89 精 灵 - 白 重 生父 小 银 建 : 前 县 序 部 章 拉 芋 认 业 ， 工 
站 磺 东 请 中 所 前 疹 守 的 旗 午 总 些 度 
4 白 鲜 折 赚 是 一 种 生活 于 北 生地 区 海域 的 晤 区 动物 ,通体 雪白 ， 生 性 退 和 ,， 现 秀全 条 部 术 万 ， 苛 抽 全 凶 质 大 这 些 家 本 
存 数量 约 10 万 头 ， 十 分 珍 策 。 CIE TS 


购 习 田村 
C 购 票 可 以 书面 中 请 ， 列 明 购 买 门票 数量 及 负责 人 资料 ， 签名 备 印 后 连同 现 


全 ， 前 往 本 公园 票务 部 办理, 即 可 领取 门票 ; 亦 可 以 邮 奎 方法 ,于 参观 前 
一 星期 格 申 请 信和 连同 抬头 "海洋 公园 " 烧 支 走 , 奇 回 本 园 " 村 务 部 申请。 
游 考 服 务 

为 了 今 您 的 彤 程 更 加 舒适 方便 ， 海洋 公园 预备 了 一 系列 6 心 的 服务 和 辅助 设 
古 。 

尽 乐 本 小 吃 店 

泛 办 了 ， 休 息 下 ， 这 里 是 你 晤 好 的 选择 ， 可 以 有 尾 色 和 美食 ， 可 以 大 众 式 快 


效应 有 竟 有 


村 用 的 体验 
OE + 一 竺 为 能 猫 炮制 受 心 美食 的 乐 


主题 礼品 让 
不 要 训 了 在 礼品 店 买 点 礼物 带 回去 与 朋友 共享 现 


动物 大 百科 


无 尾 目的 1 科 ,局 希 弧 肢 型 ， 椎 体 为 前 凹 型 。37 展 530 余 种 ， 蕊 中 ， 十 时 
属 (Hyla) 种 类 最 多 约 250 种 ， 分 布 量 广 。 


老手 剧场 


由 海洋 剧场 的 动物 朋友 倾 力 演出 ， 交 织 著 爱 与 看 动 的 国际 妙 大 型 表演 一 
一 诲 洋 伴 我 心 -， 择 合 奥斯卡 得 奖 者 亲自 拘 刀 的 完 接 ， 以 轻快 的 乐 
物 、 华 丽 的 布景 、 和 精进 的 演技 寄 屋 人 故事 透 过 祖父 与 孙女 的 真情 对 话 ， 
诉说 人 类 和 动物 和 谐 相处 ， 素 过 出 委 与 草 重 的 焉 想 。 


海 活 列 车 


欢迎 徘 从 海洋 公园 的 海洋 列车 ， 朋 动 您 一 段 精彩 的 评 ; 


图 6-2 导游 页 面 主体 的 效果 图 


(民生 网 站 文件 综述 


在 这 个 网 站 里 ， 我 们 采用 了 比较 传统 的 文件 目录 层次 ， 其 中 ， 用 images、css 和 js 三 
录 分 别 放置 网 站 所 用 到 的 图 片 、CSS 文 件 和 JS 代码 、 文 件 及 其 功能 如 表 6-1 所 示 。 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 
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表 6-1 海洋 公园 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
[listhtml 导游 页 面 
|shop html 介绍 具体 娱乐 项 的 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


6:2 ”规划 首页 的 布局 


因为 需要 搭建 一 个 简单 而 又 实用 的 网 站 ， 所 以 海洋 公园 网 站 首页 的 设计 就 比较 重要 了 ， 
下 面 ， 我 们 就 来 依次 讲述 其 中 重要 部 分 的 实现 方式 。 


@@ 殉 国 搭 建 首 页 页 头 的 DIV 


在 海洋 公园 网 站 的 首页 页 头 部 分 ， 需 要 放置 网 站 的 Logo 图 片 、 ”注册 登录 和 在 线 订 票 链 
接 和 网 站 的 导航 菜单 ， 这 部 分 的 效果 如 图 6-3 所 示 。 


注册 登录 
订 票 模块 


本 


图 6-3 首页 页 头 设计 分 析 图 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 第 7~10 行 ， 定 义 了 注册 登录 和 订 票 模块 的 代码 ， 第 
11~13 行 ， 定 义 了 网 站 的 Logo 图 片 ， 而 第 17~27 行 ， 定 义 了 导航 菜单 ， 这 里 我 们 给 出 的 是 部 分 
实现 代码 ， 其 他 一 级 和 二 级 菜单 ， 可 以 仿照 这 里 的 代码 依次 实现 。 


1. <divclass="header-footer-background-region"> 
2 <div class="search-box"> 
3 省 略 次 要 代码 

a </div> 

Se <br clear="all" /> 
6 

5 

8 

:| 

到 


<! 注册 登录 订 票 模块 --> 
<div id="buy-tickets"> 
<a href="#"> 在 线 订 票 </a> | <a href="#"> 立 即 注 册 </a> | 
<a href="#"> 登 录 </a> </div> 
</aiv> 


= 
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11. <ahref="index.html"> 


12: <img src="images/VanAqua 1ogo.jpg" border="0" /> 
3 ‘</a> 
14. ”省略 次 要 代码 


15. <! 定义 菜单 --> 


16. <divclass="content"> 


了 <ul class="nice-menunice-menu-down" id="nice-menu-1"> 
18. <! 定义 一 级 菜单 -> 

19. <li id="menu-521" class="menuparent"><a href="]1ist.html"> 精 彩 体验 </a> 
20. <ul> 

2 <! 一 一 定义 二 级 菜单 -> 

2 <1i id="menu-616"><a href="#"> 景 点 介绍 </a></1i> 

235 忽略 其 他 二 级 菜单 的 代码 

2 </ul> 

2 </1i> 

26. 忽略 剩 下 的 一 级 和 二 级 菜单 的 代码 

人 </ul> 

28. </div> 

29. </div> 


人 本 列 搭 建 ， 标 题 图 片 ” 部 分 的 DIV 


在 首页 的 醒目 位 置 ， 我 们 需要 用 一 张大 的 图 片 来 展示 海洋 公园 的 特色 ， 这 个 位 置 也 可 以 
放置 广告 图 片 ， 这 部 分 的 DIV 效果 如 图 6-4 所 示 。 


海洋 乐园 


图 6-4 醒目 图 片 部 分 的 DIV 效 果 图 


这 部 分 的 代码 非常 简单 ， 如 下 所 示 ， 其 中 通过 第 2 行 的 mg 标签 引入 一 张 图 片 。 


1. <divid="home-page-6-1-2-region"> 
汉人 <img src="images/650320.jpg" border="0" /> 
3. </div> 


上 面 代码 的 DIV 中 引入 了 ID 为 home-page-6-1-2-region 的 CSS， 这 个 CSS 的 代码 如 下 ， 用 于 
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人 DIV+CSS mammspmr 120) 2 一 『Q『〔QVvQvdvV\§Vs§ wby,y,br 


设置 所 包含 图 片 的 宽度 、 高 度 、 左 外 边 距 、 边 框 等 属性 。 


1. #home-page-6-1-2-region{ 

2 width:650px; // 指 定 宽度 

3 height:320px; // 指 定 高 度 

a margin-left:-120px; // 设 置 左 外 边 距 

5。 border:none; // 不 设置 边框 

6 background:#ffffff; // 设 置 背景 色 为 白色 
这 float:1left; // 设 置 靠 左 悬 浮 方式 
8- 1} 


光环 而 搭建 ”最 新 特别 公告 ”部 分 的 DIV 


在 首页 上 方 的 右边 部 分 ， 用 丰富 的 色彩 向 访问 者 展示 
本 公园 的 最 新 公告 ， 效 果 如 图 6-5 所 示 ， 它 包括 了 公告 头 

Re 了 文字 、 图 片 和 公告 内 容 。 其 中 ， 点 击 ”海洋 动物 天 地 、 
sn 飞禽 动物 天 地 ”和 ”游乐 设置 介绍 区域， 能 实现 展开 
和 收缩 的 效果 。 

这 部 分 的 关键 代码 如 下 所 示 ， 在 第 6 行 ， 定 义 了 头 
文字 部 分 的 效果 ， 第 10~26 行 ， 用 table 的 形式 展示 公告 
的 内 容 。 


到 | 


6-5 最 新 公告 部 分 DIV 的 效果 


1. <divid="home-page-6-3-region"> 

2 <div id="AccordionContainer" class="AccordionContainer"> 

3 <div id="AccordionlTitle" > 

4 <div id="AccordionArrowl" class="ArrowExpanded"></div> 

5 人 

6 <span> 最 新 特别 公告 </span> </div> 

区 <div id="AccordionlContent" class="AccordionDefaultContent"> 
8 <div id="block-block-3" class="block block-block"> 

9 <div class="content"> 


10. <table valign="top" border="0" 省 略 定 义 属性 的 代码 > 

Yl <tbody> 

12 <tr> 

Se <! 定义 公告 上 的 图 片 --> 

机 <td colspan="2"> 

FI <img src="images/6-3-a 0.jpg" hspace="0" vspace="2" /> 
1L6s </td> 

EE /EE 

Le <tr> 

小 放 <td> 

20. <! 这 部 分 放置 公告 前 的 小 图 片 --> 

> <img src="images/earthweek-35px.jpg" 省 略 其 他 属性 /> 
人 </td> 

之 3 <td><b> 省 略 公 告 内 容 </td> 
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24. </tr> 

2 </tbody> 

26. </table> 

ye 全 </div> 

28. <! 第 2 个 栏目 ==> 

ye <div id="Accordion2Title" onselectstart="return false;" 


onclick="runAccordion (2);"> 


308 省 略 第 2 个 栏目 的 代码 


Ss </div> 
2 省 略 其 他 栏目 部 分 的 代码 
33S<Xdawy 


个 区 三 搭建 海洋 公园 欢迎 您 ， 部 分 的 DIV 


在 首页 的 下 半 部 分 ， 用 三 个 DIV 放置 了 海洋 公园 欢迎 您 、 美食 购物 和 非 一 般 
体验 ”三 部 分 的 模块 。 这 三 个 DIV 样式 非常 相似 ， 所 以 我 们 就 以 其 中 的 ”海洋 公园 欢迎 您 
为 例 ， 说 明 这 类 DIV 的 搭建 方式 ， 效 果 如 图 6-6 所 示 。 


区 内 提供 精 更 的 点 心 和 主语 的 美 将 洋 公司 全 新 活动 ， 二 于 
食 。 提 洪 30 多 款 时 今 某 式 ， 所 括 亲身 抱 抱 可 爱 入 被 的 海豚 ， 近 距 
冷 盘 、 阔 拉 、 主 莱 及 耐 品 。 接触 及 喂食 它们 ， 你 站 
真 更 可 受 的 一 面 1 


预后 之 放 
月 洛 护理 
二 生日 汪 对 
昌 训 间 看 礼 


图 6-6 海洋 公园 欢迎 您 部 分 的 效果 图 


下 面 给 出 这 个 DIV 的 关键 代码 ， 其 中 ， 第 3 行 定义 了 标题 文字 ， 在 第 7~9 行 里 ， 展 示 了 综 
述 性 文字 ， 第 12 行 展示 了 ”在线 订购 ”部 分 的 图 片 ， 而 在 第 14~21 行 里 ， 用 ul 和 1i 的 方式 定 


义 了 其 中 的 菜单 。 

1. <divid="home-page-6-4-region"> 

2 <! 标题 文字 --> 

3 <h1><a href="#"> 海 洋 公园 欢迎 您 </a></h1> 

4. <div id="block-block-7" class="block block-block"> 

5 <div class="content"> 

6 < 中 让 绍 福 文 了 > 

类 <h2> 

8. 欢迎 来 到 海洋 公园 ， 这 里 有 很 多 新 奇 好 玩 的 游乐 设施 ， 还 有 很 多 的 动物 

有 </h2> 

10. <div> 

I <!---- 在 线 订 购 的 图 片 > 

也 全 <a href="#" target=" blank"><img src="images/6-4-buy-tickets.png" 
align="right" height="78" width="111" /> 

EE </a> 

14. <ul> 

EE <! 菜单 项 --> 

下 6 <1i><a href="#"> 订 票 规则 </a></1i> 


i <1i><a href="#"> 个 人 订 票 </a></1i> 
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18. <1i><a href="#"> 团 体 订 票 </a></1i> 
Le <1i><a href="#"> 全 年 入 场 券 </a> </1i> 
0 <1i><a href="#"> 全 年 入 场 券 续费 </a></1i> 
2 </ul> 
22 </div> 
wc <a href="#"> 详 细 &gt; ggt;</a> </div> 
24. </div> 
25. </div> 
兰 DIV 


首页 部 分 包含 的 页 脚 内 容 比 较 多 ， 不 仅 包含 了 传统 页 脚 里 拥有 的 导航 菜单 和 版 权 声明 ， 
还 放置 着 三 个 诸如 ”展望 未 来 ”一 样 的 模块 ， 这 种 模块 可 以 放置 广告 ， 也 可 以 放置 其 他 介绍 
海洋 公园 的 文字 ， 这 部 分 的 效果 如 图 6-7 所 示 。 


| 
网 


6-7 页 脚 部 分 的 DIV 效果 


页 脚 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 第 4~12 行 给 出 了 页 脚 上 半 部 分 包含 叙述 性 文字 的 
DIV 代码 ， 而 在 第 19-~25 行 里 给 出 的 是 下 半 部 分 导航 菜单 和 版 权 声明 部 分 的 代码 。 


1. <div class="footer-top-bar"></div> 

<div class="header-footer-background-region"> 

3 <! 介绍 性 文字 的 模块 --> 

<div id="bottom-left-region"> <a href="#"> 

sR <h1> 公 司 团体 一 日 游 </h1> 

6 </a> 

学 <div class="article"> 

8 <div id="block-block-10" class="block block-block"> 
9. <div class="content"> 公司 活动 的 理想 活动 </div> 
Os </div> 

FE </div> 

122 <IAdLy> 

13. 省略 另 外 两 个 模块 部 分 的 代码 

14. 

15. </div> 


16. <divid="footer-region"> 
7 <div id="block-block-13" class="block block-block"> 
18. <! 导航 菜单 --> 


La <div class="content"> 

0 <a href="#"> 海 洋 公 园 指南 </a> | <a href="#"> 联 系 我 们 </a> | 
2 省 略 其 他 导航 菜单 

和 <br /> 

2 <! 版 权 声 明 --> 

人 <span id="copyright">@ 2010 保留 一 切 权利 </span></div> 
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5 </div> 
26 </div> 


2 Shadiy> 
28. <div class="footer-bottom-bar"></div> 
29. </div> 


整个 页 脚 部 分 引用 了 ID 为 footer-top-bar 的 CSS， 这 个 CSS 的 关键 代码 如 下 所 示 ， 其 中 定义 
了 这 个 DIV 的 宽度 、 高 度 、 背 景 图 片 和 悬浮 方式 等 属性 。 


1. .footer-top-bar{ 

2 width:834px; // 定 义 宽度 

3 height:19px; // 定 义 高 度 

4. background: #ffffff url(../images/ foot-top.jpg); // 定 义 背 景 图 片 
全 background-repeat:repeat-y; // 设 置 纵向 平 铺 

6. background-position:0px 0px; // 定 义 背 景 图 片 的 起 始 位 置 

7 全 float :left; // 定 义 靠 左 的 悬浮 方式 
ol 


GE 首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 将 用 表格 的 形式 描述 首页 
中 其 他 CSS 的 效果 ， 如 表 6-2 所 示 。 
表 6-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 


<div id="buy-tickets"> <a| 定 义 DIV 的 字体 大 小 以 及 DIV 的 颜色 
href="#"> 在 线 订 票 </a> | <a | #buy-tickets { 


href= # > 立即 注册 </a> | <a display:block; 

href= # > 登录 </a> </div> position:relative; 
left:28px; 在 线 订 票 | 立即 注册 | 登录 
top:5px; 


font-size:9px; 


color:#3e8cad; 


<div id="home-page-6-4- | 定义 字体 大 小 ， 定 义 外 边 距 ， 定 义 
region"> ”<hl><a href="#"> 海 | DIV 的 高 度 和 左 内 边 距 


洋 公 园 欢 迎 您 </a></h1> #home-page-6-4-region H1, 
{ 
display:block; 
margin:0px; 
height:24px; 


padding-left: 10px:; 


font-size:11px; 


QQ、|DIV+CSS 由布 局 案例 精粹 (第 2 版 ) 


( 续 表 ) 
DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class="article"> 定义 文字 的 字体 大 小 和 左右 内 边 距 
.article #bottom-right-region .article{ 公司 国体 一 日 游 


font-size:9px; 


padding-left: 10px:; 


字体 大 小 和 左 
padding-right:10px:; 有 月 当 用 


6:3 ”导游 页 面 


在 海洋 公园 网 站 的 导游 页 面 中 ， 使 用 图 片 加 文字 的 形式 ， 详 细 介绍 公园 里 的 娱乐 项 目 。 
下 面 我 们 就 依次 分 析 一 下 其 中 重要 的 DIV 。 


导游 页 面 右边 部 分 的 DIV 


RE 在 导游 页 面 右 边 部 分 中 ， 我 们 将 放置 海洋 公园 里 最 新 
我 们 的 好 新 项 目 gl 推出 的 活动 项 目 、 趣味 资料 库 和 ”环保 小 锦 圳 ”三 部 
ee 分 的 内 容 ， 由 于 三 块 内 容 相对 独立 所 以 用 三 个 DIV 来 实现 ， 


效果 如 图 6-8 所 示 。 

这 部 分 的 代码 如 下 所 示 ， 在 第 3~6 行 里 用 DIV 的 样式 
定义 了 最 新 娱乐 项 ”内容 ， 在 第 8~12 行 里 定义 了 ”趣味 
资料 库 DIV， 而 在 第 13~16 行 里 定义 了 环保 小 锦 圳 


的 DIV。 
图 6-8 三 大 块 描 述 内 容 的 DIV 
1. <divid="rightContentBlock"> 
2 <! 第 1 块 文字 > 
3 <div class="sidebarTitle"> 
: <p class="orangeHighlight"><span> 来 自 北极 的 精灵 宝贝 ， 白 鲸 ! </span></p> 
5 <p><span> 我 们 的 最 新 项 目 <a href="#"> 白 鲸 游轮 </a>! </span></p> 
6 </div> 
7 <! 趣味 资料 库 的 文字 > 
:全 <div class="sidebarText" style="font-size:12px"> 
: 必 <p><span><i><b> 趣 味 资料 库 :</b> 
10. 光 年 是 量度 距离 的 单位 ， 而 不 是 时 间 的 单位 。 省 略 其 他 资料 文字 </i> 
Fo </span></p> 


oe 
13. <div class="sidebarText" style="font-size:12px"> 
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Ta <p><span><i><b> 环 保 小 锦 圳 :</b> 

55 危险 废物 是 指 在 。 ”省 略 其 他 文字 </i> </span></p> 
16. </div> 

17. </div> 


请 注意 ， 在 上 述 代码 的 第 1 行 里 ， 定 义 了 ID 为 rightContentBlock 的 CSS， 这 部 分 的 代码 如 
下 所 示 ， 代 码 的 第 1~4 行 ， 定 义 了 p 标 签 的 样式 ， 而 第 5-9 行 ， 定 义 了 这 个 DIV 的 样式 。 


1. #rightCcontentBlockp { 

公 margin-top:5px; // 定 义 项 部 外 边 距 

3 margin-bottom:5px;  // 定 义 底部 外 边 距 

4 

5. #rightContentBlock { 

6 width:250px; // 定 义 宽度 

了 7 padding-left:15px; ”// 定 义 左 内 边 距 

8. float:left; // 定 义 是 向 左 悬 浮 的 样式 。 
| 


游 页 面 娱乐 项 癌 DIV 


在 导游 页 面 中 ， 将 用 比较 大 的 篇 幅 介绍 海洋 公园 的 娱乐 项 ， 这 部 分 的 大 致 效果 如 图 6-9 所 
下 面 我 们 来 看 一 下 这 部 分 的 关键 代码 。 
<div class="listItemWrapper"> 
<! 娱乐 项 的 图 片 --> 
<div class="listItemImage"> 
<a href="#"><img width="80" src="images/beluga 0.jpg" height="80" /></ 


Y 
I 
3 


心 w IN 


a> 
5 </div> 
6. <divclass="listIitemText" style="font-size:12px"> 
了 <! 娱乐 项 的 标题 叙述 --> 
8. <a href="#"> 北 极 的 精灵 -- 白 鲸 </a> <br /> 
9 这 里 放置 娱乐 项 的 文字 
10. 白 鲸 白 鲸 是 一 种 生活 于 北极 地 区 海域 的 鲸 类 动物 ，“ .。 
ay 
12. </div> 
13. 至 此 一 个 娱乐 项 目 描述 部 分 结束 ， 下 面 省 略 其 他 娱乐 项 的 代码 


请 注意 ， 在 上 面 代 码 的 第 1 行 里 ， 我 们 引入 了 ID 为 listItemWrapper 的 CSS， 由 此 定义 img 和 
DIV 的 样式 ， 这 部 分 的 代码 如 下 所 示 。 


1. .listItemImage img { // 针 对 img 的 样式 
2 width:80px; // 定 义 宽度 

3 height:80px; // 定 义 高 度 

4 border:0px; // 定 义 边框 

5. } 

6. .listItemWrapper { 

5 clear: left; // 清 除 样式 

8 display: block; // 设 置 为 一 整 块 

3 
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北极 的 精灵 -- 白 旺 


白 旦 白 蚊 是 一 种 生活 于 北极 地 区 海域 的 鲸 类 动物 ， 通 体委 白 ， 生性 温和 ， 现 
存 数量 约 10 万 头 ， 十 分 珍稀 。 


购买 团 村 


购 票 可 以 书面 申请 ， 列 明 购买 门票 数量 及 负责 人 资料 ， 签 名 盖 印 后 连同 现 
金 , 前 往 本 公园 "票务 部 “办理 ， 领取 门票 ; 亦 可 以 邮寄 方法 ， 于 参观 前 
一 星期 将 申请 信人 连同 持 头 海洋 公园 划 斌 支票 ， 寄 回 本 园 票务 部 申请 。 


游客 服务 


为 了 令 您 的 旅程 更 加 每 适 方便 ， 海 洋 公园 预备 了 一 系列 贴心 的 服务 和 辅助 设 
施 。 


游乐 园 小 吃 店 


竹 累 了 ， 休息 下 ,这 里 是 你 最 好 的 选择 ,可 以 有 特色 美食 ,可 以 大 次 式 快 
艾 ， 应 有 竟 有 


非凡 的 体验 
六 走 进 熊猫 的 居所 了 和 解 季 们 的 生活 习性 , 一 尝 为 能 猎 炮 制 爱心 美食 的 乐 


主题 礼品 店 
不 要 忘 了 在 礼品 店 买 点 礼物 带 回去 与 朋友 共享 哦 


动物 大 百科 


无 尾 目的 1 科 , 启 带 弧 胸 型 ， 椎 体 为 前 四 型 。37 尾 630 余 种 ， 其 中 ， 雨 蛙 
属 (Hyla) 种 类 最 多 约 250 种 ， 分布 最 广 。 


海洋 剧场 


由 海洋 剧场 的 动物 朋友 倾 力 演出 ， 交 织 着 爱 与 感动 的 国际 级 大 型 表演 一 

一 海洋 伴 我 必 ”， 揉 合 奥斯卡 得 奖 者 亲自 操 刀 的 完美 音响 部 接 ， 以 轻快 的 乐 
竟 、 华 丽 的 布 最 、 精 则 的 演技 震 怪 人 心 。 故 事 透 过 祖父 与 孙女 的 真情 对 话 ， 
诉说 人 类 和 动物 和 谐 相 处 ， 表 达 出 爱 与 尊重 的 梦想 。 


海洋 列车 
欢迎 乘坐 海洋 公园 的 海洋 列车 ,启动 您 一 段 精彩 的 深海 历险 旅程 。 


图 6-9 娱乐 项 部 分 的 效果 图 


主题 明显 的 环保 网 站 


环境 保护 成 为 当前 世界 的 一 个 极为 鲜明 的 主题 ， 从 “ 低 碳 化 宣言 ”到 
“地 球 一 小 时 ”， 越 来 越 多 的 人 加 入 到 了 “保护 地 球 保护 未 来 ”的 行列 。 

通过 互联 网 宣传 推广 环保 理念 ， 这 是 个 非常 好 的 选择 ， 因 为 互联 网 上 有 
着 数 亿 的 网 民 。 本 章 ， 我 们 将 给 出 一 个 主题 鲜明 的 环境 保护 网 站 。 为 了 更 好 
地 吸引 访问 者 加 入 “环境 保护 ”的 行列 ， 这 个 网 站 首先 需要 用 显眼 的 图 片 来 
描述 环保 的 形势 ， 其 次 需要 用 浅显 的 文字 告诉 访问 者 一 些 环保 知识 和 环保 新 
闻 。 下 面 ， 我 们 就 来 分 析 一 下 这 个 网 站 的 设计 方式 。 


1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 环 保 网 站 的 首页 和 ”环保 图 片 面 的 设计 样式 ,而 环保 


知识 ”页 面 由 于 风格 比较 简单 ， 所 以 就 不 再 详 述 了 。 


到 于 首页 效果 分 析 


这 个 首页 虽然 包含 的 元 素 比较 多 ， 界 面 也 比较 丰富 ， 但 还 是 采用 了 三 行 的 样式 。 其 中 ， 
第 一 行 里 放置 的 是 页 头 模块 ， 包 括 网 站 Logo 和 导航 部 分 。 第 二 行 是 网 站 的 主体 部 分 ， 这 是 
一 块 大 的 DIV 岂 套 诸多 功能 模块 。 第 三 行 是 页 脚 部 分 ， 其 中 放置 些 导 航 菜单 和 ”联系 我 们 
等 内 容 。 

为 了 突出 主题 ， 本 网 站 的 背景 是 一 张 深究 的 地 球 图片 ， 提 醒 着 人 们 ， 我 们 只 有 一 个 
球 ， 首 页 的 效果 如 图 7-1 所 示 。 


闭 
引 | 
当 


[G3 


人 |DIV+CSS 两 站 布局 案例 精粹 (第 2 版 ) 


划一 行 页 头 。 包 太 
Logc 和 导航 来 间 


图 7-1 首页 效果 图 


[到 忆 对 环保 图 片 展示 页 面 的 效果 分 析 


在 环保 图 片 展示 页 面 
中 ， 每 个 图 片 的 超 链 可 以 是 
一 个 主 是 页面， 而 在 页 面 的 
左边 部 分 ， 放 置 的 是 针对 环 
保 主题 的 导航 菜单 

这 个 页 面 也 采用 了 3 行 
的 样式 ， 页 头 和 页 脚 部 分 与 
首页 完全 一 样 ， 在 第 二 行 的 
主体 页 面部 分 ， 放 置 的 是 刚 
才 提 到 的 导航 菜单 和 图 片 ， 
页 面 效果 如 图 7-2 所 示 ， 同 
羊 ， 这 个 页 面 也 采用 了 地 球 
4 冬 ] 


2 片 作为 背景。 


孩子 们 的 二 奉 
枚 于 们 术 来 有 


图 7-2 环保 图 片 页 面 的 效果 图 
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《民生 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 images、css 和 js 等 目录 分 别 保存 网 站 所 用 到 的 图 


第 7 章 “主题 明显 的 环保 网 站 


片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 7-1 所 示 。 


表 7-1 环保 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
wen.html 包含 环保 新 闻 知 识 的 页 面 
blogs.html 包含 环保 图 片 的 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img、images 和 graphics 三 个 目录 “| 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


A2 ”规划 首页 的 布局 


首页 需要 鲜明 地 突出 主题 ， 所 以 不 仅 要 通过 色调 搭配 来 吸引 访问 者 的 眼球 ， 还 要 放置 足 


够 多 的 环保 信息 ， 下 面 ， 我 们 就 依次 讲述 页 面 中 的 使 用 到 重要 样式 。 


《CE 到 脸 搭 建 首页 页 头 的 DIV 


在 这 个 环保 网 站 首页 的 页 头 中 ， 我 们 放置 了 Logo 


如 图 7-3 所 示 。 


片 和 网 站 的 导航 菜单 ， 这 部 分 的 效果 


图 7-3 首页 页 头 设计 分 析 图 


页 头 部 分 包含 三 个 关键 内 容 ，Logo 医 


片 、 网 站 宣言 和 导航 菜 


， 它 们 的 实现 代码 如 下 所 示 。 


<div id="inner"> 
<ul id="header"> 
<! 显示 Logo 图 标 --> 


<! 显示 宣言 --> 


<li class="headerCol"> 


ownamuwn 必 wmn 


a 


<1i><a href="#" class="homelink" title="Home"> 
<span class="hidden"> 首 页 </span></a></1i> 


<h1> 保 护 地 球 就 是 保护 全 人 类 </h1> 
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10. <! 放置 三 个 导航 菜单 --> 


Eh <li class="small last"> 

2. <aid="ct100 uxContactUs" class="contactus" href="blogs.html"> 
区 二 <span> 联 系 我 们 </span></a></1i> 

证 <li class="small"> 

5 <aid="ct100 uxBuyTickets" class="buyTickets" href="wen.html"> 
16. <span> 爱 心 义 卖 </span></a></1i> 

3 <li class="small"> 

18. <aid="ct100 uxHome" class="home" href="index.html"> 

19. <span> 首 页 </span></a></1i> 

20. </ul> 

21 </Alv> 


上 面 代码 中 ， 第 4 行 显示 了 本 网 站 的 Logo 图 片 ， 第 7~9 行 ， 显 示 了 ”保护 地 球 就 是 保护 全 


人 类 ”这 个 网 站 宣言 ， 而 第 11~20 行 ， 用 ul 和 li 的 方式 ， 显 示 了 导航 菜单 ， 由 此 构成 了 整个 页 
头 部 分 。 


这 部 分 的 关键 代码 如 下 所 示 ， 下 面 代码 的 第 2 行 里 ， 通 过 background:url 的 方式 ， 引 入 Logo 图 


请 注意 ， 在 第 4 行 中 没有 通过 显 式 的 方式 引入 Logo， 而 是 通过 ID 为 homelink 的 CSS 引 入 ， 


片 ， 并 在 第 4 和 第 5 行 里 ， 指 定 了 这 个 DIV 的 宽度 和 高 度 。 


1. a.homelink, a:link.homelink, a:visited.homelink, a:hover.homelink, 


a:active.homelink { 


2 background:url(../img/logo_ header.jpg) left top no-repeat; // 指 定 
Logo 图 

< display:block; // 把 这 个 DIV 定 义 成 块 

4. height :91px; // 指 定 宽度 

5 width:222px; // 指 定 高 度 

vat 


于 搭建 导航 和 快速 链接 部 分 的 DIV 


| 


es 在 首页 的 主体 部 分 里 ， 需 要 通过 菜单 ， 让 客户 

方便 地 跳 转 到 新 闻 等 页 面 ， 而 且 ， 需 要 有 专门 的 杰 
块 放置 和 环境 保护 主题 有 关 的 友情 链接 ， 这 部 分 的 
2 DIV 效 果 如 图 7-4 所 示 ， 我 们 把 两 块 内 容 放 在 一 个 DIV 
A 里 实现 。 


为 了 未 来 


这 部 分 的 关键 代码 如 下 所 示 。 


7-4 导航 和 快速 链接 部 分 的 效果 


网 


2 
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<div id="1hs"> 


<hl class="darkblu"> 加 入 生态 人 类 共 创 和 谐 未 来 </h1> 
<ul class="sideNav"> 
<li class="vistitors"> 
<a href="wen.html"accesskey="1"title="FOR VISITORS"> 环 保 新 闻 </a></1i> 
<li class="teachers"> 
<a href="blogs.html"accesskey="2"title="FOR TEACHERS "> 环保 生活 
</a></1i> 
<li class="events"> 
<a href="wen.html"accesskey="3"title="FOR EVENTS"> 共 同行 动 </a></1i> 
<li class="kids"> 
<a href="blogs.html"accesskey="4"title="FOR KIDS"> 为 了 未 来 </a></1i> 
</ul> 
<div class="quikLinkBox"> 
<h2 class=""> 快 速 链接 </h2> 
<ul class="navMenu"> 
<li class=""><a href="#"> 中 国 环保 网 </a></1i> 
省 略 其 他 链接 
</ul> 
<div class="clear"></div> 
</div> 


上 面 代 码 中 ， 从 第 2~13 行 部 分 ， 通 过 ul 和 li 定义 了 诸多 导航 菜单 ， 而 在 第 14~19 行 ， 定 义 


了 快速 链接 部 分 的 超 链 。 最 后 ， 在 第 20 行 里 ， 通 过 引入 class 为 clear 的 CSS， 清 除 本 DIV 样式 对 


后 面 其 他 DIV 代码 的 影响 ，clear 的 CSS 代 码 如 下 所 示 。 


1 
2 
3. 1} 


.Clear { 


clear:both // 清 除 样式 


《CEE 生 搭建 图片 新 闻 部 分 的 DIV 


我 们 


文 并 


F 茂 是 本 网 站 的 特色 ，。 ”图 片 新 闻 ”部 分 使 用 两 个 DIV 实 现 了 环保 动态 新 闻 和 


该 做 什么 ”两 部 分 的 内 容 ， 如 图 7-5 所 示 。 


环保 动态 新 闻 我 们 该 做 什 么 ? 
| = 


四 


图 7-5 图 片 新 闻 部 分 的 DIV 效果 图 


这 部 分 的 代码 如 下 所 示 ， 其 中 ， 在 第 2 行 里 ， 定 义 了 头 文字 ， 在 第 5~14 行 里 ， 定 义 了 一 


> 
网 


片 新 闻 ， 而 右边 ”我 们 该 做 什么 ”部 分 样式 比较 简单 ， 且 和 左边 的 ”环保 动态 新 闻 很 
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相似 ， 所 以 代码 就 不 再 分 析 了 。 


1. <divclass="hp box orange"> 

2. <hl><a title="Take a look inside" href="#"> 环 保 动态 新 闻 </a></h1> 
3. ”<p> 记 录 你 的 身边 事 . . .</p> 

4. <divid="SslideItMoo"> 

5 <div id="Mask"> 

6 <div id="thumbs"><span> 

于 <a id="mbl" class="mBox" href="img/Rooms/001.jpg"> 

8 <img src="img/hp Rooms/Earthscape.jpg" /></a></span> 

9s <div class="multiBoxDesc mbl mbHidden"></div> 

oR <strong> 环 境 保护 ， 保 护 环境 </strong> 

le </div> 

12. <div id="ct100 MainContent 58050Jobs"> 

a <div class="hp_smallbox red"><a href="#"> 更 多 动态 新 闻 . . .</a></div> 
14. </div> 

15. ”省 略 更 多 的 新 闻 

16. </div> 


《EX 答 搭建 图片 见证 部 分 的 DIV 


图 7-6 图 


Eh 
区 
3 
4 
Ss 
6 
7 
8 
号 


在 图 片 见 证 部 分 里 ， 将 展示 人 类 的 环保 历程 ， 这 部 
分 的 效果 如 图 7-6 所 示 。 

这 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 第 5~8 行 ， 用 ul 和 li 
的 方式 ， 展 示 多 张 图 片 ， 在 第 12~16 行 里 ， 使 用 图 片 显 示 下 方 
的 英文 字母 。 


网 


片 见证 部 分 的 效果 


<div id="ct100_LeftContent 58047Background selector"> 
<div id="bgSelect"> 
<h2> 图 片 见证 </h2> 
<p> 用 图 片 记录 人 类 的 环保 历程 </p> 
<ul> 
<l1i class="selected"><a href="#"> <img src="img/bg9.jpg" /></a></1i> 
省 略 其 他 图 片 的 代码 
</ul> 
</div> 


10. </div> 
11. <! 用 图 片 显 示 下 面 的 英文 字母 --> 
12. <div id="ct100_LeftContent 58051Facebook"> 


L3 <p> 

14. <ahref="#"><img src="img/f.png" /></a> 

15. ”省 略 其 他 图 片 

16. </div> 

17. </div> 

在 上 面 代码 的 第 2 行 里 ， 引 入 了 ID 为 bgSelect 的 CSS， 它 将 作用 在 u 和 li 上 ， 这 部 分 的 关键 


代码 如 


下 所 示 。 


第 7 章 ”主题 明显 的 环保 网 站 


1. #bgSelect ul 1i, #mainContent #bgSelect ul 1if{ 

2 float :left; // 指 定 浮动 方式 

3 padding:0px 1px; // 指 定 上 部 分 和 右边 部 分 的 外 边 距 
FE background: #082934; // 指 定 背 景 

5. 省 略 次 要 代码 

6. 1} 


在 HTML 代 码 中 ,ul 和 i 指定 的 图 片 将 使 用 上 述 的 样式 ， 它 们 的 浮动 方式 是 靠 左 ， 靠 上 的 


外 边 距 是 0， 靠 右 的 外 边框 为 1， 背 景色 是 #+082934。 


2 行 


搭建 页 脚 部 分 的 DIV 


页 脚 部 分 包含 了 联系 方式 、 主 题 


图 


片 和 导航 菜单 ， 大 致 效果 如 图 7-7 所 示 。 


图 7-7 页 脚 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 代 码 比 较 简单 ， 所 以 就 不 再 做 说 明了 。 


1. <divid="footer" class="1ogo"> 

2、 <ul> 

3. ”<! 菜单 效果 --> 

4. <li class=""><a href="#"> 关 于 我 们 </a></1i> 

5. <1i><a href="#" accesskey="5"> 联 系 我 们 </a></1i> 

6. <1i><a href="#"> 法 律 条 款 </a></1i> 

Ts <li class=""><a href="#" accesskey="0"> 网 站 地 图 </a></1i> 
8. </ul> 

9 <address> 

10. <strong> 保 护 环境 </strong>， 

了 保护 地 球 , 保护 全 人 类 <strong> 电 话 :</strong>021-12354152<br /> 
2 一 起 加 入 我 们 吧 ， 让 我 们 共 创 美好 未 来 

FE </address> 

14. <div class="clear"> </div> 

L155 “</div> 

16. </div> 

17. </div> 


上 面 代 码 的 第 1 行 中 ， 引 入 了 class 为 logo 的 CSS， 这 部 分 的 代码 如 下 所 示 ， 下 面 代码 的 第 
Ph， 通 过 background:url 指 定 背景 图 片 ， 并 通过 center 指 定 图 片 放置 在 页 脚 中 央 。 


1. #footer.logot{ 
Ze background:url(../img/5-star.jpg) 470px center no-repeat; 
3. 1} 


首页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 


Dk 
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描述 首页 中 其 他 CSS 的 效果 ， 如 表 7-2 所 示 。 
表 7-2 首页 DIV 和 CSS 对 应 关系 一 览 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<li class="headerCol"> <hl> | 定义 左 内 边 距 
保护 地 球 就 是 保护 全 人 类 </|#header li.headerCol { 保护 地 球 保护 全 人 类 
hl></li> padding-left:59px; 定义 去 内 边 距 是 59 像 豪 
和 
<li class= "vistitors"> 定义 背景 图 


#colourNav.visitors, #colourNav 
.vistitors { 


background: url(../img/ 


button_visitors.jpg) repeat-x 
} 
<div class="flashholder"><img | 定义 靠 左 悬浮 的 方式 和 外 边 距 
src="img/flashholder.jpg" /> </|#default_content .flashholder { 


div> float:left; 
margin:13px; 
} 
<div class="hp_box orange"> 指定 背景 色 


table.visitresources 

.orange { 
color:#F7931F; 
font-weight:normal; 
font-size:100%; 


3 ”在 首页 中 实现 动态 效果 


在 首页 中 ， 用 CSS 实 现 的 动态 效果 主要 体现 在 ”鼠标 效果 上 ， 如 
到 文字 上 面 ， 文 字 背 景 会 出 现 红 色 ， 移 出 后 ， 则 恢复 白色 背景 。 


Os Ey 后 czzm 


鼠标 郑 上 国民 标 不 放 
去 的 效果 国 的 效果 攻取 
ON LU 


加 


7-8 所 示 ， 当 鼠标 移 


网 


7-8 实现 鼠标 悬浮 效果 的 样式 
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先 来 看 一 下 这 部 分 的 HTML 代 码 。 请 注意 ， 第 8 行 引 入 了 1D 为 home 的 CSS 样 式 ， 由 此 实现 


了 鼠标 的 悬浮 效果 。 


. <li><ahref="#" class="homelink" title="Home"> 
<span class="hidden"> 首 页 </span></a></1i> 
<li class="headerCol"> 


</1i> 


<li class="small last"> 
<li class="small"> 
<aid="ct100 uxHome" class="home" href="index.html"> 


FE 

2 

:全 

4. <h1> 保 护 地 球 就 是 保护 全 人 类 </h1> 
Se 

6 

8 


9. <span> 首 页 </span></a> 
10. </1i> 

11. ”省 略 其 他 部 分 的 代码 

2 i 

Ee SUDd 


这 个 CSS 部 分 的 关键 代码 如 下 所 示 。 


1. a.home, a:link.home, a:visited.home, a:hover.home, a:active.home { 

2 background: url(../img/new-home.jpg) left top no-repeat; 

3 color:#D32026; 

a 

从 中 我 们 能 看 到 ， 当 鼠标 移 上 去 时 ， 就 会 执行 第 2 行 定 义 的 动作 ， 更 改 背景 图 片 ， 并 设 


置 DIV 的 颜色 为 #D32026， 上 


此 实现 动态 的 效果 。 


7:4 ”环保 图 片 页 面 


环保 图 片 页 面 主要 包含 两 大 要 素 ， 导 航 菜 单 和 图 片 模块 。 与 首页 一 样 ， 在 页 头 部 分 ， 放 
置 有 环保 行动 、 环保 新 闻 、 环保 动态 和 为 了 未 来 等 链接 ， 由 于 页 头 在 首页 


中 没有 叙述 ， 所 以 本 节 将 做 详细 分 析 。 


《区 列 短 环保 导航 部 分 的 DIV 


环保 导航 是 一 个 图 片 形 式 的 导航 菜单 ， 效 果 如 图 7-9 所 示 。 


环保 行动 


EE 
环保 新 闻 环保 动态 为 了 未 来 


图 7-9 导航 菜单 的 DIV 
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装 
x 


这 部 分 的 关键 代码 如 下 所 示 。 


<ul id="colourNav"> 
<li class="vistitors"><a href="wen.html"accesskey="1"> 环 保 行动 </a></1i> 
<li class="teachers"><a href="wen.html"accesskey="2"> 环 保 新 闻 </a></1i> 
<li class="events"><a href="blogs.html"accesskey="3"> 环 保 动态 </a></1i> 
<li class="kids"><a href="blogs.html"accesskey="4"> 为 了 未 来 </a></1i> 
</ul> 


Ph， 从 第 2~5 行 ， 定 义 了 四 个 菜单 ， 请 注意 在 第 1 行 引 入 了 ID 为 colourNav 的 CSS， 由 此 
四 个 菜单 的 整体 样式 ， 代 码 如 下 所 示 。 


Ee 
2 
4. 
yi 
语 


十 灶 


1. #colourNav { 

2 width:655px; // 定 义 宽度 
3 height:50px; // 定 义 高 度 
4. list-style-type: none; 
SE margin:7px000; 

6. padding:0; 

Te float : left; // 定 义 靠 左 悬浮 
8. position:absolute; 

9. DER 23px3 

Os top: 97px; 

ls 


而 在 HTML 代 码 的 第 3 行 里 ， 引 入 了 ID 为 teachers 的 CSS， 这 部 分 的 作用 是 为 每 个 导航 菜单 


引入 一 张 背景 图 ， 代 码 如 下 所 示 。 


1. #colourNav .teachers { 
2 background: url(../img/button teachers.jpg) repeat-x 
S30 


构 到 半 导航 菜单 部 分 的 DIV 


fh 


导航 菜单 将 用 菜 


的 形式 向 访问 者 提供 超 链 ， 样 式 效果 


如 图 


1i> 


7-10 所 示 。 
下 面 是 这 部 分 的 关键 代码 。 


1. <ul id="leftMenu"> 

多 <1li class="active"><span> 环 保 百 科 </span> 

3.  ” <li><a href="#"> 综 合 </a></1i> 

4. i #" > 环保 博览 </a></1i> 图 7-10 导航 部 分 的 DIV 展 示 
可 <1i><ahref="#" > 水 </a></1i> 

6 <1li><a href="#" > 大 气 </a></1i> 

4 <li><a href="#"title="Careers in Science" target="blank"> 噪 声 震动 </a></ 
8. <1i><a href="#" > 固 废 </a></1i> 

9 <li><a href="#"title="Our Favourite Websites"> 辐 射 </a></1i> 


10. <li><ahref="#"title="Blog" target="blank"> 自 然 生 态 </a></1i> 
ih 


在 代码 的 第 1 行 中 ， 引 入 了 ID 为 leftMenu 的 CSS， 这 个 CSS 作 用 域 很 广 ， 用 在 了 ul 和 1i 上 ， 
关键 代码 如 下 ， 其 中 也 定义 了 ti 中 文字 的 样式 。 


1. #leftMenu { 

clear:both; 

3 float :left; // 指 定 悬 浮 方式 

4. font-size:125%; 

5 margin:70px 13px 20px 0; // 指 定 外 边 距 
6 width:175px; 

了 color: #f5b01f; 

8. ”省 略 次 要 代码 

9 

10. #1leftMenu ul { // 针 对 ul 的 


Tle list-style-type: none; 
主 2 overflow:hidden; 

3. clear:left; 

La 

15. #1leftMenu 1i { // 针 对 1i 的 

16. margin:5px 0 0; // 指 定 外 边 距 
证 7。 overflow:hidden; 

LB float:left; 

也 9” clear:left; 

2 width:100%; 

2 


RE 图 片 部 分 的 DIV 


在 图 片 部 分 中 ， 将 用 一 些 大 尺寸 的 图 
片 来 宣讲 环保 理念 ， 每 张 图 片 都 是 一 个 主 
题 ， 每 张 图 片 都 是 一 个 链接 ， 图 片 链接 到 
详细 讲述 相应 主题 的 页 面 上 。 
图 片 部 分 的 效果 如 图 7-11 所 示 。 
这 部 分 的 关键 代码 如 下 所 示 ， 样 式 相 se 我 们 的 将 来 
对 简单 。 在 第 4 行 里 ， 定 义 了 图 片上 方 的 : , 下 是 机 要， 
文字 ， 在 第 5 行 中 ， 定 义 了 图 片 ， 这 里 是 
一 张 恐 龙 图 片 ， 而 在 第 6 行 里 ， 则 定义 了 
图 片上 的 文字 。 由 于 其 他 三 张 图 片 的 定义 图 7.11 图 片 部 分 DIV 的 演示 效果 
格 与 左上 角 的 完全 一 致 ， 所 以 这 里 就 不 
重复 说 明了 。 


QlDvicss manmarr #25) 5»»—aeao——ooaaeaeaea 〇 qqsSeQCqs 
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1. <! 左上 角 的 图 片 --> 

2. <xdivclass="hp box image lightblu"> 

3. ”<! 图 片上 的 标题 文字 --> 

4. ”<hl><a href="#"> 稀 有 动物 的 灭绝 </a></h1> 


<a href="#"><img alt="" src="img/kids-page-dino.jpg" /></a><a 
href="#"> 

6. <h2> 人 类 要 对 自己 的 行为 进行 检讨 </h2> 

y 训 </a> 

8. <p style="width: 110px"> </p> 

9. </div> 


10. 省 略 其 他 三 张 图 片 的 定义 代码 


宛 教 于 乐 的 博物 馆 网 站 


博物 馆 是 进行 科普 教育 的 理想 场所 ， 博 物 馆 的 网 站 风格 很 类 似 公司 的 网 
站 ， 它 在 页 面 上 通过 图 片 和 文字 提供 博物 馆 的 文字 介绍 、 最 新 活动 和 博物 馆 
拥有 的 藏品 ， 由 于 博物 馆 无 需 考虑 盈利 问题 ， 所 以 就 不 需要 考虑 在 网 页 醒目 
的 位 置 放置 广告 位 ， 代 著 放 置 馆藏 展品 或 最 新 活动 信息 。 

在 本 章 中 ， 我 们 将 开发 一 个 富 教 于 乐 的 博物 馆 网 站 ， 其 中 主要 包含 首 
页 、“ 博 物 馆 最 近 活 动 ”和 “藏品 介绍 ”三 大 页 面 ， 从 中 大 家 能 了 解 到 这 种 
非 盈 利 网 站 的 设计 风格 。 


8.1 ”网 站 页 面 效 果 分 析 


博物 馆 网 站 由 于 包含 的 资讯 内 容 比较 多 ， 所 以 需要 用 足够 的 导航 菜单 来 引导 访客 访问 ， 
此 外 ， 由 于 要 起 到 ”科普 ”的 作用 ， 所 以 设计 的 页 面 要 有 ”图文并茂 ”的 特点 。 

本 章 将 着 重 分 析 首页 和 ”博物馆 最 近 活 动 展示 页 的 设计 样式 , 而 藏品 介绍 页 
面 ， 虽 然 内 容 也 比较 丰富 ， 也 非常 美观 ， 但 设计 风格 和 开发 方式 与 前 两 个 页 面 非常 相似 ， 
此 就 不 做 介绍 了 。 


和 二 首页 效果 分 析 


首页 篇 幅 比 较 长 ， 分 为 六 行 的 样式 。 在 第 一 行 里 放置 包括 “图标 和 站 点 导航 块 的 
页 头 部 分 ， 由 于 博物 馆 内 容 比较 丰富 ， 所 以 第 二 行 放置 综合 导航 信息 模块 ， 第 三 行 放置 馆 
内 资讯 、 ”最 新 更 新 、 文物 保护 ”和 ”科研 收藏 导航 模块 ， 第 四 行 是 首页 的 主体 部 
分 , 介绍 馆 内 要 闻 ”和 ”最 新 科技 动态 ”， 第 五 行 依然 放置 文字 部 分 的 科普 知识 ， 而 最 后 
一 行 是 页 尾部 分 ， 包 含 导 航 菜单 和 版 权 声明 信息 。 这 个 页 面 的 篇 幅 比 较 长 ， 我 们 分 两 个 图 来 
说 明 ， 前 四 行 的 效果 如 图 8-1 所 示 ， 最 后 两 行 的 效果 如 图 8-2 所 示 。 
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最 曾 
-重大 村 有 下 
让 


新 型 火 稍 速度 达 55 公 里 / 秒 

美国 用 者 二 工学 随和 者 们 下 要 中 机 一 案 一 划 开 从 

who Chan Duaz| 兽 是 一 位 介 娄 只， 他 者 由 ， 昌 用 大 
和 ht 机 的 VAGIMR 小 入 可 星 思 各 忆 桥 他 水星 的 过 席 
鸡 由 下 已 疆 雪 二 这 的 外 址 过 各 


， 国 的 全 卫星“ 可 机 里 因 情 幼 少 也 革 玫 
Ww" 可 大介 他 刘 太太 全 全 芝 正 相 的 夫 二 押 
外 衬 大 国字 般 电 有 所 纵 。 旧 关于 过 中 并 电信 在 区 车 基 
且 久 取 玉 “是 库 ” 计 规 ， 舍 册 天 计划 卫 在 于 襟 十 年 几 实 代 
内外 近 用 W 之 蓝 ， 基 国生 各 居 正 在 并 村 村 的 他 林 保 博 和 
pw 人 AS 人 


退 主 机 内在 拉 厅 可 大 人 1 隐 要 从 位 人 攻 公 司 必要 天 开本 
PT A rt 
并 国字 航 忆 1 纪 基 本 不 玉生 说， 芭 基 四 于 写 叶 党 们 六 
机 人 民企 台风 生起 入 增 村 性 卡 的 其 有 和 外用。- 和 
9 
六 科 而 ， 使 诬 计 的 抽 天 类 各 和 盏 用 电大 时 宰 
A 
划 千 “体征 入 人 民生 中， 
六 本性 。 也 计 军 用 计生 贷 村 各 人 各 如 这 25 人 
Pp 


EE 


二 轩 伟 本 有 委 千 和 境 共 在 各 字 锋 雁 中 加 


月 27 百 ， 可 《这 下 文 》 大 系 列 内 色 利 全 渍 地 的 最 后 
名 并 人 2 于 丙 “这 征文 加 由 华人 皇 ” 也 本 证 了 精 


。 不 六 类 网 时 腿 误 ， 革 要 从 们 一 起 矶 引 


中 美 料 学 这 首次 充 站 重 妹 09 年 下 站 年 十 大 料 普 事 。。 从 根 会 双 实 牙 2010 年 冯 中 国 商 会 产 鲜 交 梳 300 下 
夫 上 演 争 夺 战 7 划 仙 生 天 和 生肖 这儿 
RE De Wr 
TREE 最 闻 的 和 在 ena 全 -六 大 陋 机 地 位 所 期， 
他 未 时 全 击 ， 员 居间 村 要 相 什 2010 和 二 出 寺 庆 天 一 页 作用 性 
bb pT 村 拓 的 内 和 雹 热 。 记 者 从 各 万 了 ee 
w + TT] -一 
末了 籽 ”， 天 图 代 三 计算 的 责 
本 克 为 010 二 晶 一 芭 


pe 区 共 近 下 林 时 则 交 枝 ， 企 重点 上 
和 


av， 让 文 评 明 要 过 下 
关 人 和 惠 的 FIR 丙 ， 玫 
科 四 了 六 近 区 他 大 


区 泣 灾 本 | 牧人 门 的 风 放 


PR 
入 江 及 站 光 上 各色 的 江 全 法 
be 


出 


最 近 活动 页 面 的 效果 分 析 


最 近 活 动 页 


所 示 。 


这 个 页 


网 


Ph， 使 


大 


-十 过 请 疡 请 
探索 大 自 
然 "有 奖 知识 
竞赛 说 明 


发 布 日 期 2010 
这 是 一 次 思维 的 碰撞， 这 是 
一 场 智慧 的 比拼 。 大 连 自 类 
博物 馆 充分 利用 自身 在 地 

质 、 古 生物 、 动 植物 领域 的 
法 源 优势 ， 倾 力 打 千 出 个 
集 趟 来 、 知 识 、 娱 乐于 一 身 
的 引人入胜 、 扣 人 心弦 的 有 
奖 况 赛 快 来 报名 地 加 吧 ! 

10 : 50 比赛 规则 ”每 个 选手 完 | 
性 等 相关 内 容 。 每 道 题 对 应 相应 的 


第 一 列 ， 用 图 片 和 文字 
部 分 介绍 最 新 的 活动 


活动 地 点 ;大连 自然 博物 馆 三 楼 综合 教室 ”活动 时 间 ; 5 月 1 日 9; 20 
| 受 6 首选 择 题 和 1 道 与 家 长 的 互动 题 ， 范 围 涉及 到 矿物 、 古 生物 、 动 植 刚 、 生 : 

分 值 ， 根 据 最 后 得 分 评 出 一 、 奖 ， 分 别 获 得 皮 诺 考古 向 龙 模 价值 150 元 、 56 元 、 38 元 ) 。 同 时 为 现 
| 场 观众 稚 备 了 多 道 问答 通 ， 答 对 的 观众 当场 即 可 得 到 精美 礼品 一 份 。 ”活动 对 象 ; 参赛 选手 ， 6 人 ， 年 前 10 一 16 


岁 。 现场 观众 。 80 人 。 报名 时 间 ， 4 月 5 日 一 4 月 26 日 。 报名 方式 ， 考 赛 选手 和 现场 观众 都 需 报名 才 
加。 夫 赛 选手 报名 方式 ， 到 大 连 自 热 博物 馆 发 票 处 报名 ， 额 清 为 止 。 

同一 片 蓝 天 ， 同 园 大 连 本 土 鸟 类 科普 展 

上 监 布 日 期 2010 2 


乌 类 是 大 自然 的 组 成 部 分 之 一 ， 是 大 自 热 的 宝贵 财富 ， 是 人 类 的 朋友 ， 它 们 与 人 类 的 生活 有 着 密切 的 关系 ， 维 护 着 自然 界 
的 生态 平衡 。 千 百年 来 乌 类 和 人 类 和 谐 共处 相依 相 件 ， 共 享 一 片 蓝天 ， 生 命 得 到 了 延续 和 繁衍 。 近 年 来 ， 爱 乌 、 护 乌 、 保 
护 生态 环境 已 经 成 为 人 们 的 共识 ， 沁 其 在 乌 类 次 源 丰 富 的 大 连 市 。 大 连 地 处 辽 南 丘陵 ， 黄 渤海 左右 环绕 ， 自 然 地 理 条 件 丰 
和 多样 ， 处 于 东亚 候 乌 迁 社 通 道 的 核心 地 带 ， 共 有 乌 类 20 目 69 科 404 种 ， 分 别 占 东北 地 区 的 86 1% 和 全 国 的 30 3%。 

| 伪 由 大 连 市 第 二 十 九 .局 膨 鸟 周 利 来 之 际 ， 牧 馆 将 二 4 月 24 日 隆重 检测 汇 拓 乌 类 咎 友 得 影 作品 、 乌 类 相关 知识 、 3D 环 
保 地 面 画 于 一 体 的 科 萤 展览 ， 以 期 向 您 展现 大 连 地 区 乌 类 生活 的 真实 情态 。 展 览 同时 配合 形式 多 样 的 科普 互动 活动 : 纸 模 
蜡 制 作 、 手 给 风 特 、 给 面 等 敌 。 万 其 是 开展 当日 来 参观 的 游客 ， 如 果 衣 在 该 展览 中 执 齐 3 枚 印 有 我 馆 馆 标的 展品 ， 将 有 
小 礼物 赠送 。 项 袁 能 名 浴 您 属 来 一 个 导 快 而 有 意义 的 参观 经 历 。 


网 


图 8-3 最 近 活动 展示 页 的 效果 


网 站 文件 综述 


加 文字 的 方式 介绍 博物 馆 最 近 的 活动 ， 大 致 的 效果 如 


， “我 馆 首次 : 
的 形式 倡导 环保 


用 发 布 公益 广告 


“兽王 探秘 一 一 遍 宽 年 话 虎 ” 展 
蜂 将 于 4 月 12 日 结束 


”拥抱 自然 放飞 希望 ” 主题 科 
普 活动 成 功 举行 


次 举办 《 生 请 


我 馆 一 批 精 品 标本 即 桂 赴 港 展览 


自然 探秘 


自然 界 的 毒 杀 本 

为 什么 蚂蚁 是 大 力士 
生存 让 北京 的 狠 - 北 极 狠 
奇异 的 伙 件 


海底 世界 的 大 王 乌 丹 


国际 交流 


8-3 


区 


个 


的 文件 部 分 是 比较 传统 的 ， 用 img 和 css 


回 


录 分 别 保存 网 站 所 


到 的 


CSS 文 件 ， 文 件 及 


功能 如 表 8-1 所 示 。 


图 片 和 
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表 8-1 电影 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
news.html 最 近 活 动 展示 页 面 
portfolio.html 藏品 展示 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
img 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


8:2 ”规划 首页 的 布局 


首页 的 内 容 比 较 复杂 ， 我 们 把 它 分 为 几 个 部 分 ， 分 别 分 析 一 下 首页 中 诸多 重要 DIV 的 实 
现 方式 。 


《到 国 搭建 首页 页 头 的 DIV 


页 头 部 分 包含 了 Logo 和 标题 及 导航 菜单 两 大 部 分 ， 样 式 的 效果 如 图 8-4 所 示 。 


| 晤 ”博物 馆 网 站 | 首页 。 博物 馆 展品 介绍 。 新 闻 。 最 新 展 出 ”图 书 文献 。 订 村 热线 


Logo 和 标题 导航 桨 单 3 Se 
9 4 - 


图 8-4 首页 页 头 的 DIV 设 计 分 析 图 


江 
全 
六 
x« 


实现 页 头 部 分 的 关键 代码 如 下 所 示 ， 第 3~11 行 定义 了 右边 部 分 的 导航 菜单 
了 左边 部 分 的 Logo 图 片 。 


<div id="header"> 
<! 定义 菜单 --> 
<ul id="main menu"> 
<1i class="fist element"><a href="index.html" class="selected"> 首 页 </ 


<l1i><a href="news .html"> 博 物 馆 </a></1i> 
<1i><a href="portfolio.html"> 展 品 介绍 </a></1i> 
<1i><a href="#" > 新 闻 </a></1i> 

<1i><a href="#"> 最 新 展 出 </a></1i> 

<1i><a href="#"> 图 书 文献 </a></1i> 
TOR <1i><a href="#"> 订 票 热线 </a></1i> 
FE 让 下 交 光 和 和 > 
12. <! 定义 Logo 图 片 --> 
13. <hl id="logo"><ahref="index.html"></a></hl1> 
14. </div> 


EB 
2 
3 
4 
a></1i> 
3 
6 
2 
8 


vo 


第 8 章 ” 寅 教 于 乐 的 博物 馆 网 站 


， 我 们 引入 了 ID 为 main_menu 的 CSS， 代 码 如 下 所 示 


， 正 是 因为 在 第 2 行 设置 了 


人 靠 右 的 悬浮 方式 ， 所 以 在 页 头 部 分 的 HIML 里 ， 先 定义 右边 的 导航 菜单 ， 而 后 再 定义 左边 的 


Logo 和 标题 。 
1. #main menu { 
float:right; /* 靠 右 悬 浮 */ 
村 padding-top: 0px; /* 设 置顶 部 内 边 距 */ 
4 margin-right: 26px; /* 设 置 右边 部 分 的 外 边 距 */ 
5 display: inline; 
6. } 


人 搭建 “导航 菜单 “部 分 的 DIV 


在 页 头 的 下 边 ， 有 专门 的 DIV 区 域 用 来 放置 博物 馆 网 站 的 导航 菜单 ， 这 部 分 的 效果 如 


8-5 所 示 。 


欢 志 来 到 我 们 的 博物 霹 风 站 ”TSE 
部 分 文字 


网 


图 8-5 导航 菜单 DIV 效 果 图 


下 面 来 看 一 下 这 个 DIV 的 关键 代码 ， 其 中 ， 
他 部 分 的 菜单 代码 由 于 很 相似 ， 所 以 就 不 再 重复 给 出 了 。 


1. <divid="pitch"> 

2. ”<h1> 博 物 馆 </h1> 

3 <dl> 

4 <dt>PITCH</dt> 

加 <dd class="pitch-services"> 

6 <h2> 欢 迎 光临 </h2> 

</dd> 

8 <qdt> 资 讯 </dt> 

9. <dd> 

0 < 

电导 <1i><a href="#"> 参 观 资讯 </a></1i> 
二 <1i><a href="#"> 馆 内 要 闻 </a></1i> 
13 <1i><a href="#"> 展 示 介 绍 </a></1i> 
14. <1i><a href="#"> 近 期 活动 </a></1i> 
:Ee 

16. </dd> 

17. ”省略 其 他 导航 菜单 

18 . 

19. </div> 


Ph， 实现 了 第 一 列 的 菜单 ， 
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下 对 搭建” 馆 内 资讯 ， 等 4 部 分 的 DIV 


菜单 的 下 方 ， 用 1 个 DIV 放 置 了 4 个 ”图片 + 文字 部 分 的 模块 ， 效 果 如 


贺 


gu 二 PE 并 轩 
一 二 个 世人” 异 吉 


图 8-6 馆 内 资讯 等 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 它 以 ul 和 ii 的 方式 陈列 四 个 模块 。 其 中 ， 从 第 3~10 行 使 
个 li 标签， 定义 ” 馆 内 资讯 ”部 分 模块 。 


1. <divid="portfolio"> 

4 <ul> 

3 <1i> 

2 0 

5 <h3> 馆 内 资讯 </h3> 

6 <p> 本 馆 全 年 对 外 开放 ， 周 一 闭 馆 请 关注 网 站 通知 公告 </p> 
<! 图 片 部 分 --> 

| <img src="img/portfolio-website.gif" /> 

9. <a href="#" class="btn-web_portfolio"> 更 多 资讯 </a> 
于 四 后 HLL 

a 省 略 其 他 三 个 模块 

di2- </ul> 

13. </div> 


在 上 面 代码 的 第 1 行 中 ， 我 们 引入 了 ID 为 portfolio 的 CSS， 这 部 分 的 代码 如 下 所 示 ， 由 此 
定义 了 针对 整个 DIV、1i、h3 和 img 等 标签 的 样式 ， 这 部 分 的 说 明 请 看 下 面 代码 的 注释 。 


1. #portfolio { /* 针 对 整个 DIV*/ 

人 background:url(../img/bg-portfolio.gif) left top repeat-x; /* 设 置 背 
景 图 片 */ 

3 overflow:hidden; 

4 padding-bottom:20px; /* 设 置 底部 内 边 距 */ 

Se 

6. #portfolio 1i { /* 针 1i 元 素 */ 

float :left; /* 设 置 悬浮 方式 */ 

8 width:245pzx; /* 设 置 宽度 */ 

9. text-align:center; /* 设 置 字体 对 齐 方式 */ 

10 . /* 设 置 背景 */ 

FE background:url(../img/bg-portfolio-separator.gif) right 50% no— 
repeat; 

U2 

13. #portfolioh3{ 

14. font-size:1.6em; /* 设 置 字体 大 小 */ 


ii 第 3 齐 专 孝 于 乐 的 博物 馆 网 站 


EE margin-top:20px; /* 设 置顶 部 外 边 距 */ 
16。 3 

17. #portfolio img { /* 针 对 图 片 */ 

18. margin:5px auto 15px; /* 设 置 外 边 距 */ 

19. display:block; /* 设 置 成 块 */ 

SO 


本 和 对 搭建 ”人 馆 内 要 闻 和 科教 动态 ”部 分 的 DIV 


馆 内 要 闻 和 科教 动态 部 分 主要 用 于 讲述 科普 知识 ， 所 以 仍然 采用 图 片 加 文字 的 DIV 样 
式 ， 效 果 如 图 8-7 所 示 。 


馆 内 要 闻 与 科教 动 太 pe(# 冯 


文 》 展 系列 特色 科普 活动 的 最 后 
加 的 戏剧 导 览 “达尔文 的 科学 人 生 ” 也 将 落下 帐 
这 次 为 期 三 个 多 月 的 达尔 文系 列 活动 画 上 一 个 完 
泪 最 后 的 谢幕 演出 中 ， 我 们 增加 了 一 些 全 新 的 内 
宣 ” 的 讲解 和 表演 之 外 ， 我 们 特别 为 此 次 活动 制作 
了 让 传 海报 ， 进 请 了 所 有 曾经 扮演 过 “达尔 文 和 艾 到 ”的 志 
F 文 夫妇 同时 现 身 ， 与 观众 们 一 起 互动 ， 情 领 小 朋友 们 来 完成 的 有 趣 的 竞 


阅读 全 文 


图 8-7 馆 内 要 闻 和 科教 动态 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 第 3 行 定义 了 标题 部 分 ， 第 7 行 定 义 了 左边 的 图 片 ， 而 
第 9~11 行 定义 了 右边 的 文字 。 


Ls <div> 

200 

3. <h3> 馆 内 要 闻 与 科教 动态 </h3> 

4. <ul> 

5- > 

ek < > 

本 <img src="img/extensive logo development .jpg" /> 
8. <h4>《 达 尔 文 》 系 列 科普 活动 ”完美 谢幕 " </h4> 

9. <p>2010 年 3 月 27 日 ， 是 《达尔 文 》 展 系列 特色 科普 活动 的 最 后 一 期 。 
10. 省 略 其 他 文字 

ks </p> 

2 <a class="view_ services" href="#"> 阅 读 全 文 </a> 

3 EL 

Ja </ul> 

15. </div> 


6 搭 建 页 脚 部 分 的 DIV 


这 个 网 站 的 页 脚 部 分 包含 的 内 容 比 较 多 ， 有 ”友情 链接 、 导航 部 分 、 意见 箱 和 
图 片 、 四 大 块 ， 效 果 如 图 8-8 所 示 。 
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aa 放 : 罩 评 | 耻 人 门 的 后 六 


网 


8-8 页 底 脚 分 的 DIV 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 其 中 ， 第 2~5 行 定义 了 友情 链接 部 分 的 样式 ， 第 8~11 


行使 用 ul 和 li 定义 了 导航 菜单 ， 而 第 19 行 给 出 了 最 下 方 页 脚 图 片 的 定义 。 


le 


2 


三 
4. 
Se 
6. 
A 
8- 
9- 


05 
3 区 
2 
3 
14. 
Le 
16. 
Ts 
38E 
955 


20 


<div id="footer"> 
<div class="quick portfolio"> 
<h3> 友 情 链 接 </h3> 
<a href="#"> 博 物 馆 网 </a> 
</div> 
<div class="quick menu"> 
<h3> 关 于 我 们 </h3> 
<ul> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
省 略 其 他 导航 菜单 
</ul> 
</div> 
<div class="quick action"> 
<h3>gnbsp;</h3> 
<ahref="#">&nbsp;</a> 


<p class="copyright">Copyright 2010 保留 一 切 权利 </p> 
</div> 
</div> 
<span class="figure-footer"></span> 
-</div> 


在 第 19 行 里 ， 定 义 了 ID 为 figure-footer 的 CSS， 代 码 如 下 所 示 ， 其 中 主要 是 通过 第 1 行 的 代 


码 定义 页 脚 最 下 方 显示 的 图 片 。 


上 


span.figure-footer{ 
background: url (../img/footer-earth.jpg) left top no-repeat; /* 定 义 背 


position:relative; 
overflow:hidden; 

width: 980px; /* 定 义 宽度 */ 
margin: 0 auto; /* 定 义 外 边 距 */ 
display: block; 

height: 81px; 


卫生 首 页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 
首页 中 其 他 CSS 的 效果 ， 如 表 8-2 所 示 。 


表 8-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 


<div class="header-figure"></| 主要 是 定义 背景 图 片 


div>" div.header-figure{ ls 
background: url(../img/figure-header. = 
png) left top no-repeat; 
省 略 其 他 无 关 代码 
} 


<dd class="pitch-services"> 定义 字体 的 颜色 和 大 小 
<li><a href="#"> 参 观 资讯 </|#pitch dl dd af 


a></li> color: #778c49; 定义 字 
font-size: 1.4em; 体 样式 


font-weight: normal; 


} 
<hl id="logo"><a href="index. | 引入 Logo 图 片 ， 并 定义 鼠标 悬浮 上 的 效果 
html"></a></hl> hl#logo { 
省 略 次 要 代码 


background:url(../img/logo- 
studio7designs.gif) left top no-repeat; 


hl#logo a{ 
display: block; 
width:283px; 
height:32px; 
’ 


8.3 ”在 首页 中 实现 动态 效果 


0 


0 


中 a 


在 首页 中 ， 用 CSS 实 现 的 动态 效果 仍然 体现 在 ” 菜 汪 
鼠标 移动 到 菜单 上 后 ， 能 看 到 菜单 有 细微 的 变化 。 


浮 效果 ”方面 ， 如 图 8-9 所 示 ， 用 
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FNRI DL RSL 


阅读 全 文 


图 8-9 CSS 动 态 样式 效果 图 


先 来 看 一 下 实现 动态 效果 的 HTML 代 码 ， 代 码 如 下 所 示 。 其 中 在 第 1 行 里 引入 了 ID 为 our_ 
style 的 CSS 样 式 。 


1. <div id="our _ style"> <img src="img/wesc coast.jpg" /> 
区 <h4> 新 型 火箭 速度 达 55 公 里 / 秒 </h4> 

3 省 略 无 关 的 新 闻 部 分 的 代码 

4 <a href="#"> 阅 读 全 文 </a> 

5 </diy> 


上 述 CSS 部 分 的 样式 代码 如 下 所 示 ， 其 中 ， 第 2 行 定义 鼠标 悬浮 之 前 显示 的 背景 图 ， 而 在 
第 6 行 ， 通 过 a:hover， 定 义 了 鼠标 放 上 去 之 后 的 背景 图 ， 这 样 通过 两 张 图 片 的 更 换 ， 实 现 了 妃 
标 放 上 去 之 后 菜单 的 悬浮 效果 。 


1. #our_style a {/* 针 对 a 标签 */ 


2 background:url(../../img/btn-view portfolio-large.gif) left top no- 
repeat; 

3 省 略 其 他 无 关 的 代码 

只 

5. #our stylea:hover { /**/ 

6. background:url(../../img/btn-view portfolio-large.gif) left bottom 
no-repeat; 

Te 


8:4 。 最近 活动 页 面 


这 个 页 面 中 ， 页 头 页 脚 部 分 与 首页 非常 相似 ， 所 以 就 不 再 重复 分 析 了 ， 主 体 部 分 主要 由 
两 列 组 成 ， 第 一 列 放置 ”最 近 活 动 ”信息 ， 第 二 列 放置 导航 信息 。 


最 近 活动 信息 ， 部 分 的 DIV 


在 ”最 近 活动 信息 ”中 ， 用 图 片 加 文字 的 形式 展示 了 博物 馆 里 最 近 的 活动 ， 样 式 如 图 
8-10 所 示 ， 由 于 诸多 活动 信息 的 样式 都 很 相似 ， 所 以 我 们 就 以 其 中 的 一 个 为 例 进行 说 明 。 
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" 走 进 博物 馆 ， 


网 


8-10 最 近 活 动 的 DIV 样式 


关键 代码 如 下 所 示 ， 其 中 ， 第 6~8 行 定义 了 活动 的 标题 ， 而 在 第 10~12 行 这 对 p 标 签 里 ， 
定义 了 活动 的 详细 说 明 部 分 。 


1. <divid="blog" class="hfeed"> 

2 <div class="hentry"> 

35 <div class="left"> <a href="#"> <img src="img/111 .png" alt="" /></a> 
4. </div> 

> <div> 

6. <h2 class="entry-title"> 

TT <a href="#">" 走 进 博物 馆 , 探索 大 自然 "有 奖 知识 竞赛 说 明 </a></h2> 
8. <p class="category"> 发 布 日 期 :2010.3.13gnbsp; </p> 

9 <div> 

10. <p> 

下 省 略 文字 部 分 

2 </p> 

43> </div> 

1 </div> 

15. </div> 


到 对 右边 部 分 导航 菜单 的 DIV 


我 们 以 新闻 摘要 ”为 例 ， 说 明 右边 部 分 导航 菜单 的 
设计 样式 ， 这 个 效果 如 图 8-11 所 示 ， 它 采用 了 标题 结合 叙 
述 文字 的 样式 。 

实现 此 部 分 的 DIV 代码 如 下 所 示 ， 
闻 标 题 ， 而 第 4 行 定 义 了 新 闻 的 内 容 。 


可 


中 第 2 行 定义 了 新 


”拥抱 自然 放飞 希望 ”主题 科 
署 活动 成 功 举行 


从 再 次 注 办 《生命 素质 工程 》 


我 馆 一 批 精品 标本 即将 赴 港 展览 


[出 


8-11 导航 部 分 的 DIV 效 果 


四 
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GDIV+CSS mammepm #2) QeeaRNRVwe—e———WqwQ 〇 Q\^`^【 


1. <divclass="other posts popular"> 

2. <h3 ><span> 新 闻 摘 要 </span></h3> 

局 <ul> 

本 <1Li><atitle='' href="#">。 省 略 新 闻 内 容 </a></1i> 
5 省 略 新 闻 

Gs </ul> 

7 </Aiy> 


在 上 面 第 1 行 代 码 中 ， 引 入 了 ID 为 other_posts 的 CSS， 这 个 CSS 的 作用 范围 比较 广 ， 下 面 
来 看 一 下 它 的 实现 代码 ， 代 码 比 较 简 单 ， 我 们 就 不 做 分 析 了 。 


1. .other posts { /* 针 对 整个 DIVx/ 

2 border:solid #fff; /* 设 置 边 框 颜色 */ 

:人 border-width:0 1px; /* 设 置 边框 宽度 */ 

eh 

5. -other posts h3 { /* 针 对 h3*/ 

Gs background: url(../../img/bg-other posts-title.gif) left top 
repeat-—x; 

border-top: 1px solid #e5e5e5; /* 设 置顶 部 边框 宽度 和 颜色 */ 

: 短 border-bottom: 1px solid #fff; /* 设 置 底部 边框 宽度 和 颜色 */ 

9. font-weight: bold; /* 设 置 字体 样式 */ 

UO font-size: 1.3em; /* 设 置 字体 大 小 */ 

11: line-height: lem; /* 设 置 行 高 */ 

I width: 227px; /**/ 

3 height: 29px; 

14. ”省 略 其 他 次 要 代码 

U5 

16. .other postsh3 spant /* 针 对 h3 和 span*/ 

a position: absolute; 

18. width: 100%; height: 100%; /* 设 置 宽度 高 度 */ 

记号 top=:0r left 0 

2051 
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体现 个 性 的 个 人 网 站 


个 人 网 站 用 来 展示 个 人 信息 ， 表 现 个 人 的 个 性 ， 所 以 其 中 的 内 容 要 比 个 
人 博客 丰富 ， 而 且 样 式 也 需要 比 博客 精美 。 

本 章 我 们 介绍 一 个 “美术 摄影 ”题材 的 个 人 网 站 ， 网 站 上 将 放置 站 长 
的 作品 和 站 长 的 一 些 心得 体会 。 本 网 站 包括 首页 、“ 作 者 导航 ”和 “作品 展 
示 ” 三 大 页 面 ， 从 对 这 三 大 页 面 的 分 析 中 ， 大 家 能 了 解 到 这 类 网 站 的 风格 和 
实现 方式 。 


9.1 ”网 站 页 面 效 果 分 析 


这 个 网 站 的 主题 是 ”摄影 美术 ， 所 以 在 首页 中 ， 需 要 放置 站 长 创作 的 作品 ， 而 且 
要 提供 一 套 有 效 的 导航 和 搜索 体系 ， 让 访客 能 找到 他 们 感 兴趣 的 作品 。 

在 本 章 中 ， 将 着 重 分 析 首 页 和 ”作品 导航 ”的 设计 样式 ， 而 第 三 个 作品 展示 ”页面 ， 
于 样式 比较 简单 ， 所 以 就 不 再 分 析 了 。 


首页 效果 分 析 


个 人 网 站 的 首页 是 四 行 的 样式 ， 在 第 一 行 里 ， 放 置 包 括 网 站 Logo 图 片 和 ”导航 部 分 的 
页 头 部 分 。 第 二 行 里 放置 ”网 站 搜索 ”功能 模块 ， 第 三 行 是 首页 的 主体 部 分 ， 放 置 ”拿手 作 


品 。 第 四 行 里 是 页 脚 部 分 ， 这 个 页 脚 部 分 中 ， 包 含 的 东西 比较 多 ， 有 ”友情 链接 、 导 
航 菜单 ”和 版 权 声 明 。 首 页 的 效果 如 图 9-1 所 示 。 


由 


El 
EL 
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p{ 第 一 行 ， 包含。 ] 
[和 .52 二 时 的 图 片 ”博客 ” 心情 ”自我 展示 


关于 网 站 “联系 我 “法 律 条 款 ， 业务 联系 “广告 合作 
网 站 技术 支持 “我 们 的 团队 


站 保留 一 切 权利 


图 9-1 首页 的 效果 图 


@ 忆 对 作品 导航 页 的 效果 分 析 


在 作品 导航 页 面 主体 部 分 ， 使 用 两 列 的 布局 实现 导航 和 图 片 显 示 效果 ， 其 中 左边 部 分 放 
置 分 类 导航 菜单 ， 而 在 右边 放置 这 个 分 类 下 的 图 片 ， 大 致 的 效果 如 图 9-2 所 示 。 


第 9 章 ”体现 个 性 的 个 人 网 站 


购买 这 张 画 | 类 型 : 神 之 战争 | 


风景 图 片 ， 令 人 心旷神怡 这 是 
非 委员 只 


关于 网 站 ”联系 我 法 竺 条 地 
网 站 技术 支持 “我 们 的 国 了 


保留 一 切 权利 


加 


图 9-2 作品 导航 页 的 效果 
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RE 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 9-1 所 示 。 


表 9-1 个 人 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
| illustration.html 导航 页 面 
| photography.html 描述 详细 作品 的 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 


本 网 站 需要 用 到 的 图 片 


9.2 ”规划 首页 的 布局 


— 


首页 从 布局 上 来 看 ， 有 主题 突出 和 导航 方便 两 大 特性 ， 下 面 我 们 依次 分 析 首 页 中 比较 重 
要 DIV 的 实现 方式 。 


人 天 搭建 首页 页 头 的 DIV 


首页 的 页 头 部 分 ， 包 含 了 Logo 图 片 、 导 航 菜单 和 ”登录 注册 模块 ”三 大 部 分 ， 显 示 效果 
如 图 9-3 所 示 。 


图 9-3 首页 页 头 的 DIV 设计 分 析 图 


实现 页 头 部 分 的 关键 代码 如 下 所 示 ， 从 第 3~7 行 ， 定 义 了 首页 Logo 图 片 ， 从 第 8~11 行 ， 
定义 了 导航 部 分 的 菜单 ， 从 第 12~15 行 ， 定 义 了 注册 和 登录 功能 模块 ， 而 从 第 19~23 行 ， 定 义 
了 注册 和 登录 菜单 下 方 的 次 要 的 导航 菜单 。 

1. <div id="db head"> 

2. <! 1ogo 图 片 --> 

3 <div id="db logo"> 

4 <ahref="index-html" > 


El 第 9 亭 体现 个 性 的 个 人 网 站 


3 <img alt="Veer" height="50" src="img/dungbeetle logo.gif" width="67" 
/> 

G6. </a> 

Ts </div> 

8. <ul id="db nav" class='home'> 

9. <1i id="db phot"><a id="photographyImage" href="index.html"> 我 的 首页 </ 
a></1i> 

10. ”省 略 其 他 导航 菜单 代码 

le UL 


12. <ulid="db status top"class="db status"> 

13. <li><aid="ct100 ct100 navigation loginLink" href="#"> 登 录 </a></1i> 
14. <li><ahref="#" > 注册 </a></1i> 

19. </ul> 

16. <ulid="db status bottom" class="db status"> 

17. ”<li> <a href="#"> 网 站 管理 </a> </1i> 


Toc eA 
19. <ulid="db subnav"> 
205 <1i id="db_ acct"><a id="accountImage" href="#"> 我 的 好 友 </a></1i> 


21. <liid="db cart"><a id="cartImage" href="#"> 人 生 历 程 </a></1i> 

22. <1i id="db lbox"><a id="1ightboxImage" href="#"> 社 会 实践 </a></1i> 
23> </ul> 

24. </div> 


EM DIV 


在 页 头 的 下 方 ， 放 置 的 是 搜索 ”功能 模块 ， 其 中 还 能 通过 复 选 框 ， 让 访问 者 搜索 图 
片 、 文 章 等 信息 ， 效 果 如 图 9-4 所 示 。 


Er Ea [OE 如 要 = 过 站 闫 这 


网 站 帮助 


网 


图 9-4 搜索 区 域 的 DIV 效果 


下 面 我 们 来 看 一 下 这 个 DIV 的 关键 代码 ， 其 中 ， 从 第 2~10 行 的 代码 中 ， 定 义 了 搜索 文本 
框 和 搜索 按钮 ， 在 第 14~24 行 中 ， 定 义 了 搜索 按钮 右边 的 四 个 复 选 框 。 


1. <divid="qsnavcontent"> 


2 <div id="qsleft"> 

<div id="searchInputBox"> 

4. <div> 

5 <input name="" type="text" value=" 请 输入 " size="27" class="text" 

6. style="width:180px; margin-right:6px; float:left;" /> 

<input type="submit" value=" 搜 索 " class="button common button orange 
Da mainsearchButton" language="Javascript" /> 

SR </div> 


Er </div> 

Eh </div> 

12. ”省 略 其 他 无 关 代码 
13. <! 定义 复 选 框 --> 
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14. <divid="qsright"> 


15 <ul> 

16. <! 定义 复 选 框 和 旁边 的 文字 --> 

LE 让 <1i> 

18. <input id="ct100 ct100 quickSearch photography" 

19. type="checkbox" name="z01" checked="checked" onclick="resulttab="'"';" 
/> 

20 <label for="ct100 ct100 quickSearch photography"> 我 的 图 片 <//1abel> 

2 </1i> 


225 省 略 另 外 三 个 复 选 框 和 文字 的 代码 
230 < /> 


24. </div> 
25. </div> 
EE 对 搭建 ”作品 展示 “部 分 的 DIV 
这 个 个 人 网 站 的 主题 是 展示 作品 ， 所 以 在 首页 的 主体 部 分 里 ， 用 比较 大 的 篇 幅 来 构建 这 


部 分 的 DIV， 效 果 如 图 9-5 所 示 。 


图 9-5 作品 展示 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 ， 在 第 2~5 行 里 ， 定 义 了 头 文字 ， 在 第 12 行 里 ， 定 义 了 这 块 
DIV 里 的 大 图 ， 在 第 17~24 行 中 ， 定 义 了 右边 部 分 的 小 图 效果 。 
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be 
0 
号 
4. 
和 
\ 
了 - 
8 


局 


255 
262 


0 人 生计 > 
<div id="browseralert"> 欢 迎 各 位 来 到 我 的 网 站 gnbsp; 
<a id="BrowserAlertViewReqs" href="#"> 这 里 记录 着 我 的 人 生 历 程 </a> 
还 有 我 的 作品 。 
</div> 
<div id="fbherocontainer"> 
<div id="homePageElement"> 
<div id="fbmaincolumn1"> 
<div id="heroContainer"> 
<a href="#" rel="640 360 popup"> 
<! 定义 大 图 片 --> 
<img width="530" height="460" border="0" src="img/ hero.jpg" /> 
</a> 
</div> 
<p id="fbherolink"> 作 者 : <a href="#"> 我 自己 </a></p> 
</div> 
<div id="fbmaincolumn2"> 
<! 定义 右边 的 小 图 以 及 说 明 --> 
<a href="#" rel="525 745 popup" ><img src="img/home.2010.04.diy.gif" 
width="165" height="110" border="0" /></a> 
<p> 我 的 作品 <br /> 
山清水秀 风 和 日 丽 啊 ， 多 美的 画 呀 。</p> 
省 略 针对 其 他 图 片 的 定义 
</div> 
</div> 
</div> 


在 上 面 代码 第 2 行 里， 我 们 引入 了 ID 为 browseralert 的 CSS， 由 此 定义 页 头 文字 DIV 部 分 的 
样式 ， 这 部 分 的 代码 如 下 所 示 ， 从 代码 中 可 以 看 出 ， 页 头 文字 部 分 是 以 红色 背景 为 底 色 ， 此 
外 这 部 分 的 CSS 还 定义 了 头 文字 部 分 的 字体 和 字体 颜色 。 


于 
2 
3 
4. 
天 
6 
jt 


在 H 


#browseralert 
{ 
padding: 10px 0 10px 33px; /* 定 义 内 边 距 */ 
font: 11px verdana, helvetica, arial, geneva, sans-serif; /* 定 义 字体 */ 
color: #fff; /* 定 义 字体 颜色 */ 
background-color: #F00; /* 定 义 背 景色 */ 
} 


TML 代 码 的 第 8 行 里 ， 引 入 了 ID 为 fpmaincolumn1 的 CSS， 这 部 分 的 代码 如 下 所 示 ， 


其 中 关键 在 第 5 行 ， 它 实现 了 向 左 悬 浮 的 特性 。 


auw 心 wm 


#fbmaincolumnl{ 
position: relative; 
background-color: #FFF; /* 设 置 背 景色 
width: 530px; /* 定 义 宽度 */ 
float: left; /* 向 左 悬 浮 */ 
margin: 0; /* 外 边 距 */ 
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在 HTML 代码 的 第 17 行 里 ， 引 入 了 ID 为 fbmaincolumn2 的 CSS， 这 部 分 的 代码 和 上 述 
fbmaincolumn1l 很 相似 ， 区 别 在 于 使 用 了 float:right， 实 现 了 向 右 悬 浮 的 样式 。 


GX 辽 对 搭建 页 脚 部 分 的 DIV 


这 个 网 站 的 页 脚 部 分 包含 的 内 容 比 较 多 ， 不 仅 有 传统 的 导航 信息 和 版 权 声明 ， 还 包含 了 
一 大 块 友情 链接 的 内 容 ， 效 果 如 图 9-6 所 示 。 


林 活 ; 平 机 订 癌 | 部 范 订 而 


关于 网 站 “联系 我 | 法 律 条 款 “ 业务 联系 | 广告 合作 
网 站 技术 支持 “我 们 的 团队 


图 9-6 页 底部 分 的 DIV 


页 脚 部 分 实现 代码 如 下 所 示 。 由 于 包含 的 模块 比较 多 ， 我 们 把 它 分 三 块 来 说 明 ， 从 第 
2-~13 行 里 ， 使 用 ul 和 1i 的 方式 ， 定 义 第 一 行 的 友情 链接 ， 从 第 14~22 行 里 ， 定 义 诸如 ”图片 
网 之 类 的 ”图 片 加 文字 加 说 明 ”部 分 的 超 链 ， 这 里 我 们 仅 给 出 一 个 例子 ， 由 于 其 他 三 个 超 
链 代码 风格 很 相似 ， 所 以 就 不 再 重复 给 出 了 。 


1. <div id="fudgefooter"> 

2 <ul class="pale feed"> 

3 <1i> 友 情 链接 :</1i> 

4. <li><a href="#"> 图 片 网 </a></1i> 

5. ”<li><a href="#"> 广 告 网 </a></1i> 

6 <1i><a href="#"> 公 司 网 站 </a></1i> 

7 <1i><a href="#"> 社 区 网 </a></1i> 

8. <1i class="label"> 

9. <img width="16" height="16" src="img/footer/icon feed.gif" /> 免费 订阅 : 
UD 

11. <li class="clean"><a href="#"> 手 机 订阅 </a></1i> 

12. <1i><a href="#"> 邮 箱 订阅 </a></1i> 

SA 

14. <divid="footer common"> 

15. <p id="othersites" style="font-size:12px;"> 友 情 推 荐 :</p> 
16. <! 如 下 定义 图 片 加 文字 加 说 明 部 分 的 超 链 --> 
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17. <div class="corbisimages"> <a href="#" ><img height="40" src="img/ 
footer/logo corbisimages light.gif"width="134" /></a> 

18s <p style=" font-size:12px;"> 

19. 图 片 网 ， 一 个 很 不 错 的 网 站 ， 上 面 有 很 多 设计 师 所 需要 的 东西 


20% <ahref="#" >></a> 


Is </p> 
22- </div> 


在 上 面 代码 的 第 1 行 中 ， 引 入 了 ID 为 fudgefooter 的 样式 ， 这 个 CSS 也 能 作用 于 ul 上 ， 代 码 
如 下 所 示 ， 由 于 在 第 2 行 里 使 用 border-bottom 定 义 了 底部 样式 ， 所 以 在 页 脚 部 分 第 一 行 友情 链 


接 和 下 方 之 间 ， 有 一 


个 长 条 的 边框 。 


#fudgefooter ul.feed { 
border-bottom:1px solid#CCCCCC; /* 定 义 底部 边框 的 样式 */ 


padding-bottom:10px; /* 定 义 底部 的 内 边 距 */ 


FE 
区 
5 margin:0 010pzx; /* 定 义 外 边 距 */ 
4. 
5 


在 友情 链接 下 面 


， 是 导航 和 版 权 声明 两 块 ， 关键 代码 如 下 所 示 ， 由 于 样式 比较 


简单 ， 下 面 就 不 再 详细 说 明了 。 


1. <divid="copyright"> 

2. <pclass="links"> 

32 <a href="#" > 关于 网 站 </a> 

3 <img src="img/footer/footer-vdiv.gif" height="9" width="3" border="0" 
/> 

5. ”<xahref="#" > 联系 我 </a> 

6. <img src="img/footer/footer-vdiv.gif" height="9" width="3" border="0" 
pe 


Te 省 略 其 他 部 分 的 导航 菜单 


9 epD> 


9. <! 版 权 声 明 --> 
10. <p class="copy"> &copy; 2009 个 人 网 站 <a href="#"> 保 留 一 切 权利 </a></p> 


Li </diy> 
12. </div> 


C5 首页 CSS 效 果 分 析 - 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 9-2 所 示 。 


Dk 
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表 9-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div id="db_logo"> 主要 是 定义 logo 部 分 的 背景 
#db_logo { 


background-repeat: no- 


background-image: url(../img/ 
dungbeetle_logo_shadow.gif); 


-repeat; 


我 NNS 而 我 的 图 片 
设置 logo 部 
分 的 背景 “下 


<ul class= "pale feed "> 
<li> 友 情 链接 :</li> 
color:#999999; 
} 
定义 宽度 和 悬浮 方式 
#searchInputBox 


{ 


<div id="searchInputBox"> 


float:left; 


9.3 


width:274px; 


作品 导航 页 面 


作品 导航 页 面 的 样式 分 成 两 列 ， 左 边 一 列 放置 导航 菜单 ， 近 妊 
右边 一 列 放置 作品 ， 下 面 我 们 依次 说 明 。 训 
机 器 人 
火星 撞 地 球 
CE 于 左边 导航 部 分 的 DIV 2 
左边 导航 部 分 的 样式 效果 如 图 9-7 所 示 ， 从 上 到 下 分 别 
是 ”购买 联系 模块 、 网 站 导航 ”模块 和 个 人 作品 展 
模块 。 


这 部 分 的 菜单 效 


果 是 用 


. <divid="supacontainer"> 
<div id="fbherocontainer"> 
<div id="fbcolumn1"> 


1 
全 
4 <a href="#"> 
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u 和 1i 方 式 实现 的 ， 其 他 的 代码 也 
比较 简单 ， 所 以 就 不 再 详细 说 明了 ， 代 码 如 下 所 示 。 


最 新 作品 


9-7 导航 部 分 的 效果 图 


ER 第 9 章 体现 个 性 的 个 人 网 站 


局 
加 > 
《十 
上 
上 


EE 


El 


42 
3 
14. 


Le 
16. 
有 
18 . 
9 
20. 
2 


22 


<img src="img/ mp.gif" width="165" height="125" border="0" /> 
</a><br /> 
&nbsp; <br /> 
<! 网 站 导航 部 分 的 图 片 --> 
<img src="img/collections.gif" width="165" height="30" /> 
<ul> 
<li><a href="#" style="font-size:12px"> 神 之 战争 </a></1i> 
省 略 更 多 的 菜单 
</ul> 
<a href="#"><img src="img/ callout.gif" width="165" height="125" 
border="0"/> 
</a><br /> 
&nbsp; <br /> 
<img src="img/featuredgalleries.gif"width="165" height="30" /> 
<ul> 
<li><a href="#" style="font-size:12pzx;"> 城 市 一 天 </a></1i> 
省 略 更 多 的 ”个 人 作品 展 菜 单 " 
</ul> 


-</div> 


全 到 用 作品 部 分 的 DIV 


在 导航 部 分 的 右边 ， 是 作品 部 分 的 DIV， 它 使 用 了 


玖 


出 


片 加 文字 说 明 ”的 样式 ， 效 果 如 


9-8 所 示 。 


图 9-8 图 片 部 分 的 效果 图 


实现 此 部 分 的 DIV 代 码 如 下 所 示 ， 其 中 在 第 5 行 中 ， 定 义 了 作品 图 片 ， 从 第 6~8 行 里 ， 定 
义 了 针对 作品 的 描述 。 


<div class="fbfeatured"> <a href="#"> 
<! 图 片 部 分 --> 
<img class="fbfeaturedmain" src="img/002.jpg" width="340" height="220" 
/></a> 
<p style="font-size:12px"> 


风景 图 片 ， 令 人 心旷神怡 
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二 <a href="#"> 这 是 非 卖 品 哦 </a></p> 
9 <br clear="all" /> 
10. </div> 


在 上 述 代码 的 第 3 行 里 ， 我 们 引入 了 ID 为 fbfeatured 的 CSS， 这 部 分 代码 作用 在 p 标 签 
上 ， 代 码 如 下 所 示 ， 它 定义 了 字体 的 对 齐 方式 、 字 体 项 部 的 外 边 距 、 右 边 的 内 边 距 和 项 部 
的 内 边 距 。 

1. .fbfeaturedp{ 

p text-align: left; /* 定 义 字体 的 对 齐 方 式 */ 

3 margin-top: 0; /* 定 义 顶部 的 外 边 距 */ 

4 padding-right: 5px; /* 定 义 右边 的 内 边 距 */ 

5 padding-top: 0; /* 定 义 顶 部 的 内 边 距 */ 

6 
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内 容 丰富 的 交友 网 站 


通过 互联 网 ， 远 在 天 涯 的 人 能 “ 近 在 各 尺 ”地 交流 ， 通 过 交友 网 站 ， 人 
们 能 更 广泛 地 认识 和 结交 志同道合 的 朋友 。 

本 章 我 们 将 分 析 一 个 交友 网 站 的 实现 方式 ， 这 个 网 站 主要 有 首页 、“ 交 
友 活 动 页 ”和 “会 员 信 息 ” 三 个 页 面 ， 由 于 篇 幅 的 关系 ， 本 章 将 只 详细 讲述 
前 两 个 页 面 。 


10.1 ”网 站 页 面 效 果 分 析 


这 个 交友 网 站 的 风格 是 青春 靓丽 ， 所 以 它 不 仅 需要 通过 缤纷 的 色彩 体现 网 站 的 特色 ， 而 
且 需 要 通过 比较 多 的 照片 来 吸引 访问 者 的 眼球 。 

在 本 章 中 ， 将 着 重 分 析 首 页 和 ”活动 页 面 的 设计 样式 ， 而 “会员 详细 信息 
码 和 风格 与 前 两 个 页 面 非常 相似 ， 就 不 再 详细 说 明 ， 这 个 页 面 的 代码 请 大 家 自行 从 与 本 书 配 
套 的 下 载 资源 中 获取 。 


人 LN 首页 效果 分 析 


交友 网 站 的 首页 效果 如 图 10-1 所 示 ， 它 是 一 个 三 行 的 布局 样式 ， 在 第 一 行 里 ， 放 置 了 网 
站 的 Logo 图 片 和 站 点 导航 信息 。 在 第 二 行 里 ， 分 别 用 两 列 来 表示 交友 和 ”活动 征婚 元 
素 。 而 在 最 后 一 行 的 网 站 页 脚 部 分 放置 导航 信息 。 

在 首页 第 二 行 框架 中 ， 包 括 了 交友 网 站 的 主体 部 分 ， 这 部 分 其 实 是 个 两 列 的 效果 ， 第 一 
列 包括 搜索 模块 和 会 员 展 示 模 块 ， 第 二 列 包括 ”最 新 活动 、 人 金牌 会 员 和 征婚 三 部 
分 内 容 。 


bl 
地 
当 
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Bring the world 万 
into your community 


登录 | 注册 | 联系 我 们 | 帮助 中 心 


Text Size 国人 A 


成 为 金牌 会 员 我 们 会 忧 先 推荐 活动 紊 会 等 


[EEE 


征婚 
起 找到 | 你 的 另 一 半 吗 ? 开 好 搜索 吧 


Zu EE 


输入 关键 字 来 寻找 您 的 另 一 站 


成 为 明星 会 员 
成 为 明星 ， 交 更 多 的 朋友 


交友 网 站 的 主体 部 
分 ， 放 置 交 友 ， 征 婚 
活动 等 部 分 的 信息 


图 10-1 首页 的 效果 图 


活动 页 面 的 效果 分 析 


活动 页 面 大 致 上 也 采用 


了 三 行 的 样式 ， 第 一 行 和 第 三 行 的 样式 与 首页 相同 ;在 第 二 行 


里 ， 包 含 了 两 个 大 列 ， 第 一 列 容纳 了 联系 我 们 、 投票 模块 和 参加 活动 的 好 处 这 
三 大 块 内 容 ， 而 第 二 列 靓 丽 的 图 片 突出 了 最 新 活动 ”这 个 主体 ， 活 动 页 面 效 果 如 图 10-2 所 


示 。 
最 新 活动 ”是 交友 网 
显示 活动 信息 的 效果 。 


站 的 一 大 特色 ， 所 以 在 这 个 页 面 中 ， 使 用 JS+CSS 的 方式 构建 动态 


第 10 章 ”内容 丰富 的 交友 网 站 


你 晶 区 加 半 动 双 ? 于 了 志 自 尼 我 们 双 . 


| [本 系 我 们 


最 想 参 加 那个 种 美的 活动 ? 
口 相 幸 
口 旭光 
Dns 


EE) 


景 新 一 季 的 活动 开始 了 
到 餐 相亲 会 

新 一 季 的 活动 开 巡 了 哦 。 这 和 们 主打 由 舟 是 康 志 和 相亲 结合 ， 而且 是 大 型 的 那 种 相亲 噶 ， 人 数 银 多 ， 把 对 
有 全 意中人 


参加 活动 的 好 处 
专区 开 玉 可 此 碍 > 基 久 可 了 好 和 讨 凶 炎 
各 并 而 村? 过 加 析 

人 


某 均 


大 家 正在 际 餐 中 现实 中 可 而 有 天 更 由 忆 
可 博识 有 请 成 美好 杂 


前 


相亲 大 会 
场面 很 大 和 起 全 太 场面 的 相合 
mm 填 有 六， 很 下 一 次 二 


关于 尖 人 0 | 是 Me) 才 | 要 后 的 十 | 三 局 吉 行 


图 10-2 活动 页 面 的 效果 图 


人 [EN 网 站 文件 综述 


在 这 个 网 站 里 ， 除 了 上 文 里 提 到 的 首页 和 活动 展示 页 面 外 ， 还 需要 包含 会 员 信息 页 面 ， 


这 些 页 面 中 所 


到 图 片 、CSS 文 件 和 JS 代码 ， 将 分 别 放置 在 images、css 和 js 目录 里 。 文 件 及 其 


功能 如 表 10-1 所 示 。 


表 10-1 交友 网 站 文件 和 目录 一 览 表 


模块 名 


页 面 文件 index.htm 首页 
Activity.htm 活动 页 面 
member.htm 会 员 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
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10.2 规划 首页 的 布局 


在 上 一 节 中 ， 我 们 已 经 介绍 了 切 图 的 方法 ， 所 以 这 里 我 们 直接 进入 到 设计 步骤 ， 设 计 
的 时 候 还 是 按照 老 规矩 : 先 用 DIV 构建 总 体 框架 ， 随 后 再 细 分 ， 最 后 用 CSS 和 JS 实现 动态 


的 效果 。 


搭建 首页 页 头 的 DIV 


刚才 我 们 已 经 分 析 了 ， 首 页 大 致 上 可 以 分 为 三 行 ， 其 中 第 一 行 是 页 头 ， 包 含 Logo 图 片 和 
导航 菜单 等 信息 ， 页 头 效果 如 图 10-3 所 示 。 


履 杂 | 注册 | 联系 我 们 | 帮助 中 心 


网 


图 10-3 首页 页 头 的 DIV 设计 分 析 


实现 页 头 部 分 的 关键 代码 如 下 所 示 。 


.<! 绘制 些 辅助 效果 的 DIV--> 


<DIV id="container"> 


<DIV class="flowContainer closeable" id=1ightboxContainer></DIV></DIV> 
<! 定义 页 头 的 DIV--> 

<DIV id=header> 

<DIV id=headertop> 

<DIV id=topnav> 

<DIV id=loginstatus><! 定义 导航 工具 条 的 DIV--> 


TT 
。 <LI><A href="#"> 登 录 </A> | </LI> 


.</UL> 

.</DIV><! 定义 导航 工具 条 结束 --> 

-</DIV> 

. <p><A id=sponsorlink href="#" target=new></A></p> 
.<p><img src="image/banner01.jpg" /></p> <! 定义 网 站 Logo--> 
“DIY. 

. <DIV id=mainnav> 

20. 
2 的 


<UL> 
<LI id=navigation tab search><A class="tab "href="#"> 首 页 </A></LI> 


22. 


ER 第 10 训 内 容 丰 富 的 交友 网 站 


23- /Lb> 
24. </DIV> 
2 DIVS 


在 上 述 代码 的 第 2~4 行 中 ， 放 置 一 些 辅助 的 DIV， 真 正 的 页 头 从 第 6 行 开始 定义 。 从 第 
9~14 行 ， 我 们 定义 了 导航 工具 条 ， 包 括 导航 、 注册 和 联系 我 们 等 内 容 ， 在 第 
17 行 里 ， 我 们 定义 了 网 站 的 Logo 图 标 ， 而 在 第 19~23 行 ， 定 义 了 一 些 链接 ， 可 以 链接 到 首 
页 和 活动 页 面 。 


搭建 首页 主体 部 分 的 DIV 


按照 前 文 的 思路 ， 我 们 还 是 用 DIV 的 方式 构建 首页 主体 部 分 的 DIV， 这 部 分 的 效果 如 图 
10-4 所 示 。 

首次 主体 部 分 主要 包括 “搜索 、 最 佳 男 女 会 员 、 明星 会 员 、 本 站 特色 
最 新 活动 、 会员 介绍 和 高 级 搜索 等 部 分 的 内 容 。 


输入 关键 字 来 寻找 修 的 另 一 半 


ay ey 


Bring the world 
into your community 


这 


下 面 我 们 分 步骤 介绍 其 中 各 个 DIV 的 实现 方式 。 
第 一 部 分 实现 ”搜索 部 分 的 DIV， 这 部 分 关键 代码 如 下 所 示 。 


图 10-4 交友 网 站 里 主体 部 分 DIV 效果 图 


1. <DIV id=searchbox> <! 引入 左边 的 图 --> 
<DIV id=rightsearch> 

3 <H2> 寻 找 知己 </H2> 

4 省 略 searcherror 的 DIV 


DIV+CSS mmmsppr 128) 2 o®©© 有 有 © 有 Om©OOoo 
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二 县 二 

6. <DIV id=locationentry> 

Ss <LABEL class=overlabel for=location> 地 区 </LABEL> 

8. 省 略 搜索 部 分 的 其 他 代码 

95 

10 . <input id=submitsearch type="button" value=' 搜 索 ' name=submitsearch> 

11 <BR> 

23 <DIV id=geocodelocations style="DISPLAY: none"></DIV> 

3 <DIV style="PADDING-TOP: 10px"> </DIV> 

14. <P><A href="#"> 高 级 搜索 </A></P> 

15. </DIV> 

在 上 述 代 码 中 ， 通 过 第 1 行 的 代码 ， 引 入 搜索 部 分 的 图 片 ， 随 后 ， 在 第 6~15 行 ， 定 义 了 
诸如 文本 框 和 按钮 等 控件 。 


第 二 部 分 是 实现 ”最 佳 会 员 部 分 的 DIV， 关 键 代 码 如 下 所 示 ， 其 中 第 17 行 定义 了 最 佳 


ws 
3 


Oop 


je 
[= 


Le 
Ep 


员 ”部 分 里 左边 的 图 片 。 其 他 代码 则 是 定义 一 些 文本 框 等 控件 ， 所 以 就 不 做 详细 说 明了 。 


<! 最 佳 男女 会 员 部 分 的 DIV--> 
<img src="image/s01.jpg" /> 
<DIV style="CLEAR: both"> </DIV> 
</DIV> 
<DIV id=volunteerbox> 

<DIV id=volunteerheader> 

<H3> 最 佳 女 会 员 </H3> 
省 略 本 DIV 里 其 他 部 分 的 代码 


</DIV> 
</DIV> 
</DIV> 


第 三 部 分 是 实现 ”明星 会 员 部 分 的 DIV， 关 键 代码 如 下 所 示 ， 其 中 第 30 行 定义 了 这 部 
分 头 上 的 广告 图 片 。 


EE 
2 
3 
4. 
3] 
6 


六 


IN 


aU 


<! ”明星 会 员 部 分 的 DIV--> 
<DIV idq=subbox1> <a href="#"> 
<img class=subboximg alt=" 明 星 会 员 " src="image/023.jpg"></a> 
<H4 class=bold> 成 为 明星 会 员 </H4> 
省 略 本 DIV 里 其 他 部 分 的 代码 


</DIV> 


第 四 部 分 是 实现 ”本 站 特色 ”部 分 的 DIV， 关 键 代码 如 下 所 示 。 


Dk 


<! 本 站 特色 部 分 的 DIV--> 
<DIV id=subbox2><A href="#"><IMG class=subboximg width="230" 
height="120" alt=" 快 速配 对 " src="image/009.jpg"></A> 

<H4 class=bold> 男 女 会 员 快 速配 对 </H4> 

<P> 本 站 特色 : 快速 配对 。 为 您 节约 时 间 。 </P> 

省 略 本 DIV 里 其 他 部 分 的 代码 


</DIV> 
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第 五 部 分 是 实现 ”博客 部 分 的 DIV， 关 键 代码 如 下 所 示 ， 这 部 分 的 DIV 中 没有 什么 需 
要 特别 注意 的 地 方 ， 所 以 不 做 详细 说 明 。 


:I <DIV id=subbox3> <a 

2. href="#"><img class=subboximg alt=" 会 员 博 客 " width="230" height="120" 
src="image/010.jpg"></a> 

3 <H4 class=bold> 会 员 博 客 </H4> 

4 <P> 我 们 提供 专业 的 博客 您 可 以 上 传 你 的 图 片 写 下 您 的 心情 </P> 

5 <P><STRONG><A href="#"> 进 入 博客 </A></STRONG></P> 

6 

未 


</DIV> 
</DIV> 
第 六 部 分 是 实现 网 站 右边 ”最 新 活动 、 金牌 会 员 和 征婚 三 部 分 的 DIV， 这 部 
分 DIV 也 没什么 特别 的 地 方 ， 所 以 我 们 就 给 出 关键 代码 ， 不 做 说 明 ， 代 码 如 下 所 示 。 


hE <DIV id=columnside> 

2 <DIV id=aboutbox> 

EE <DIV> 

a <H3> 最 新 活动 </H3> 

SR 省 略 本 DIV 部 分 的 其 他 代码 
Ga 

7 </DIV> 

8. </DIV> 

gs <DIV class=homepagebox> 
10. <H3> 金 牌 会 员 </H3> 

Te 省 略 本 DIV 部 分 的 其 他 代码 
2 


I </DIV> 
14. <DIV id=subsearchbox> 


ne <H3> 征 婚 </H3> 

16. 省 略 本 DIV 部 分 的 其 他 代码 
7 

18. </DIV> 

19. </DIV> 


搭建 页 脚 部 分 的 DIV 


交友 网 站 的 页 脚 部 分 DIV 比 较 简 单 ， 主 
要 用 于 显示 一 些 导 航 性 的 文字 ， 效 果 如 图 
10-5 所 示 。 

实现 这 部 分 效果 的 代码 如 下 所 示 。 


页 乔 部 分 的 DIV 


关于 我 们 最 新 动态 | 招贤 纳 士 


网 


10-5 页 脚 部 分 的 DIV 设计 


1. <DIV id=footer> 

区 <UL> 

3 <LI><A title=" 关 于 我 们 " href="#"> 关 于 我 们 </A> | 
4. <LI><A title=" 最 新 动态 " href="#"> 最 新 动态 </A> | 
5 <LI><A title=" 招 贤 纳 士 " href="#"> 招 贤 纳 士 </A> | 
6 <LI><A href="#"> 会 员 排行 </A> | 

</UL> 

8. </DIV> 
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首页 CSS 效 果 分 析 


在 前 面 描 述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 10-2 所 示 。 


DIV 代码 


表 10-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
CSS 描 述 和 关键 代码 效果 图 


<DIV id=searchbox> 


<DIV id=locationentry> 


定义 搜索 部 分 DIV 的 背景 色 
与 DIV 四 个 边框 的 颜色 
#searchbox { 

BORDER-RIGHT: #70bc7e 
1px solid; 

BORDER-TOP: #70bc7e 
1px solid; 

BORDER-LEFT: #70bc7e 
1px solid; 

BORDER-BOTTOM: 

#70bc7e 1px solid; 

BACKGROUND-COLOR: 
#9bd061 


Ezy 
四 


定义 文本 框 里 的 默认 内 容 是 
加 粗 的 
HTML DIV#locationentry 
LABEL { 

FONT-WEIGHT: bold; 
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( 续 表 ) 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<LI class="tabup tab" | 定义 标签 卡 中 的 数字 的 内 边 
id=vtl> 距 相同 ， 并 设置 字体 颜色 与 
背景 色 


#volunteerheader .tabup { 
PADDING-RIGHT: 3px; 
PADDING-LEFT: 3px:; 
PADDING-BOTTOM: 3px:; 
COLOR: #37abbe; 
MARGIN-RIGHT: 1px; 
PADDING-TOP: 3px; 

BACKGROUND-COLOR: 

#Ffff， 

TEXTALIGN: center 
} 


<IMG class=imgleft 


alt="" src="image/001. 


jpg" border="0"> 


<DIV id=footer> 


定义 图 片 ， 使 图 片 靠 左 ， 并 
且 与 右边 的 文字 间距 为 10 个 
像 系 
.imgleft { 
FLOAT: left; 
MARGIN-RIGHT: 10px 
} 
定义 字体 大 小 、 颜 色 ， 并 且 
使 之 对 齐 
#footer { 


FONT-SIZE: 0.9em; 
COLOR: #666; 
TEXT-ALIGN: left 


121 


QQ、|DIV+CSS 网 站 布局 案例 精粹 (第 2 版 ) 


10.3 在 首页 中 实现 动态 效果 


Sis 


在 这 个 交友 网 站 中 ， 除 了 单纯 使 用 DIV+CSS 外 ， 还 用 了 JavaScript 定 义 了 网 页 的 动态 效 
果 。 这 里 主要 体现 在 两 个 方面 ， 第 一 ， 如 图 10-6 所 示 ， 当 单 击 “Text Size 后 的 A 链接 
后 ， 能 动态 更 新 网 站 的 字体 。 

第 二 ， 单 击 ”最 佳 会 员 ”模块 里 的 数字 链接 ， 能 动态 地 更 新 会 员 的 信息 ， 如 图 10-7 所 
示 ， 比 如 单 击 了 2 号 链接 ， 就 在 这 个 部 分 显示 2 号 会 员 的 信息 。 


登录 | 注册 | 联系 我 们 | 帮助 中 心 


点 击 后 ， 能 修改 
Text size: 只 轿 
图 10-6 动态 更 新 网 站 字体 的 示意 图 图 10-7 通过 单 击 ， 能 更 新 会 员 的 图 片 和 信息 


女 /32 岁 


湖南 长沙 


更 改 字体 的 实现 方式 
为 了 实现 更 改 字体 的 效果 ， 我 们 需要 在 JavaScript 文 件 里 定义 如 下 所 示 的 代码 。 


1. $(document) .ready (function() { 

2. <! 定义 显示 在 首页 上 的 文字 --> 

3. $('#mainnav') .append('<div id="fontsize" class="small">Text Size: 
<span id="fontsmall" title="Medium">A</span><span id="fontbig" 
title="Large">A</span></div>"'); 


省 略 其 他 部 分 的 代码 


fsmall.click (function() { 
$('body').css('font-size', 'medium'); 


4 

上 人 

6. <! 显示 小 字体 --> 
加 

8. 

9. ”省 略 其 他 部 分 的 代码 


Ss 
12. <! 显示 大 字体 --> 
13. fBig.click(function() { 
14. $('body').css('font-size', 'large'); 


15. 省略 其 他 部 分 的 代码 
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DIS 
18. }) 7 


上 面 代 码 中 ， 在 第 3 行 定义 了 首页 上 显示 的 文字 ， 在 第 7 和 第 13 行 ， 定 义 了 实现 大 小 字体 
的 两 个 方法 ， 比 如 第 8 行 代码 通过 设置 font-size 为 medium， 实 现 了 小 字体 的 效果 。 而 在 第 14 
行 ， 设 置 font-size 为 large， 实 现 大 字体 的 效果 。 

定义 好 JavaScript 代 码 后 ， 在 首页 的 代码 中 ， 通 过 如 下 方法 就 能 引入 更 改 字体 效果 的 JS 方 
法 : $(document).ready(function(0)， 详 细 代 码 请 参见 与 本 书 配套 的 下 载 资源 的 源 文件 。 


实现 更 换 会 员 信 息 的 效果 


我 们 可 以 通过 下 面 的 步骤 ， 实 现 更 换 会 员 信 息 的 效果 。 
第 一 步 ， 首 先 定义 若干 个 会 员 信息 ， 下 面 我 们 就 给 出 一 个 会 员 信息 的 代码 。 


1. <DIVid=vtl s><! id 为 vtl s--> 
<! 定义 会 员 图 片 --> 

3. <a href="Member.htm"> <IMG class=imgleft alt="" src="image/001.jpg" 
border="0"> 

4 </a> 

5. <! 定义 会 员 了 昵称 等 信息 --> 

6. <DIV class=subinfo> 

7 

8 


<H4><a href="Member.htm"> 菲 儿 139</a></H4> 
<P> 女 /20 岁 </p> 
9. <p> 北 京 /北京 </p> 
10. ”<p> 大 家 好 ， 很 高 兴 认识 大 家 。 </P> 
11. <P><STRONG><A href="Member .htm"> 详 细 交 友 资 料 </A></STRONG></P> 
2 /Div> 
TS DIV> 


请 注意 在 第 1 行 代码 中 定义 了 DIV 里 使 用 的 CSS 的 ID 是 vtl_1， 这 个 CSS 用 于 实现 超 链 的 效 
果 。 

第 二 步 ， 通 过 如 下 所 示 的 代码 ， 在 1、2 等 标签 上 ， 定 义 超 链 效果 。 比 如 在 第 2 行 里， 我 
们 定义 的 超 链 是 <A href= "#W#vtl_s">， 由 此 会 链接 到 对 应 的 会 员 页 面 上 。 


TT 

2 <LI class="tabup tab" id=vt1> <Ahref="#/#vt1 s"> 

3 <SPAN style="DISPLAY: none"> 交 友 宣言 </SPAN>1</A> </LI> 
4 <LI class=tab id=vt2><RAhref="#/#Vvt2 _s"> 

5 <SPAN tyle="DISPLAY: none"> 交 友 宣 言 </SPAN>2</A> </LI> 
6 省 略 其 他 部 分 的 代码 

人 

8. </UL> 
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10.4 ”活动 页 面 


在 活动 页 面 中 使 用 了 图 片 加 文字 的 方式 展示 一 些 成 功 的 活动 ， 让 网 友 有 参加 的 想法 。 本 
节 我 们 将 只 分 析 该 页 面 的 特点 ， 与 首页 雷同 的 部 分 就 不 再 做 说 明 。 


活动 页 面 左边 部 分 的 DIV 
活动 页 面 左边 部 分 的 显示 效果 如 图 10-8 所 示 ， 这 里 我 们 需 


你 想 参 加 活动 吗 ? 那 就 块 来 联系 我 们 吧 : 


联系 村 要 实现 如 下 的 特色 : 第 一 ， 一 个 大 DIV 里 包 有 4 个 小 DIV， 这 可 
以 用 DIV 布局 的 方式 来 实现 ， 第 二 ，4 个 DIV 的 宽度 相同 ，DIV 
最 起 参加 那个 种 类 的 洒 之 间 的 间隔 相等 。 


上 图 依次 用 了 四 个 DIV， 每 个 DIV 都 有 边框 ， 并 且 边 框 颜 
色相 同 。 关 键 实现 代码 如 下 所 示 ， 请 注意 第 2 行 中 引入 了 ID 为 


columnbox 的 CSS 样 式 。 

1. <DIV id=subcolumnside> 
参加 活动 的 好 处 2 <DIV class="columnbox top"> 
A 3 <P> 你 想 参 加 活动 吗 ? 那 就 快 来 联系 我 们 吧 :</P> 
从 的 汪 动 和 有 不 一 样 的 宣言 在 和 你 4. <input type="button" value=" 联 系 我 们 "> 

3 </DIV> 

- 6 
ni </DIV> 


图 10-8 CSS 效 果 展 示 

同样 的 DIV 和 同样 的 CSS 代 码 写 三 次 行 了 ， 这 里 为 了 节省 篇 幅 ， 我 们 就 只 给 出 一 个 DIV 代 
码 。 在 实现 时 ， 通 过 代码 的 第 2 行 引 用 ID 为 columnbox 的 CSS， 实 现 包含 在 里 面 的 DIV 有 边框 ， 
并 且 颜 色 一 致 的 效果 ，columnbox 的 实现 代码 如 下 所 示 。 


1 .columnbox { 

2 BORDER-RIGHT: #b2b2b2 lpx solid; 
二 BORDER-TOP: #b2b2b2 1px solid; 

A BORDER-LEFT: #b2b2b2 1px solid; 
3 COLOR: #333; 

6 BORDER-BOTTOM: #b2b2b2 lpx solid 
7 

8 


2 

上 述 代 码 中 所 实现 的 效果 与 前 几 章 的 同类 CSS 效 果 是 一 样 的 ， 这 里 要 注意 的 就 是 DIV 边 
框 颜 色 的 更 换 ， 不 可 再 使 用 前 面 的 颜色 ， 而 是 使 用 总 2b2b2 这 个 颜色 。 

请 大 家 关注 第 5 行 的 COLOR: #333; ， 它 把 DIV 里 的 字体 颜色 给 固定 了 ， 如 果 需 要 使 用 
别 的 颜色 可 以 自行 定义 。 
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活动 页 面 右边 部 分 的 DIV 


活动 页 面 右边 部 分 分 成 两 部 分 ， 上 面部 分 是 即将 开始 的 活动 ， 下 面部 分 是 成 功 的 活动 。 
下 面 我 们 分 析 一 下 相应 的 实现 代码 。 

首先 介绍 上 面部 分 最 新 活动 的 DIV， 其 效果 如 图 10-9 所 示 ， 这 里 没什么 特别 的 地 方 ， 所 
以 只 给 出 代码 ， 不 再 做 详细 说 明 。 


景 新 一 季 的 活动 开始 了 
聚餐 相亲 会 


相亲 会 


a 新 一 季 的 活动 开始 了 噬 。 这 次 我 们 主打 的 就 是 孙 餐 名 相 系 结合 ， 而 且 是 大 型 的 那 种 相 系 吻 。 人 郊 很 多 ， 绝对 
ll 有 从 的 意中人 


图 10-9 活动 右边 上 半 部 分 展示 效果 


实现 此 部 分 的 DIV 代 码 如 下 所 示 。 


1. <DIVid=subfeatureheaderfull> 

2. ”<H2> 最 新 活动 </H2> 

Se </DIV> 

4. <DIVid=subfeatureinfo 

5. onmouseover="document .getElementById('corpimage') .src='image/022.jpg';"> 
<IMG class=imgleft style="PADDING-BOTTOM: 40px" src="image/018.jpg"> 

6. <H3> 最 新 一 季 的 活动 开始 了 <BR> 


聚餐 相亲 会 </H3> 

8. <P> 新 一 季 的 活动 开始 了 哦 。 这 次 我 们 主打 的 就 是 聚餐 和 相亲 结合 ， 而 且 是 大 型 的 那 种 相亲 
哦 。 人 数 很 多 ， 绝 对 有 你 的 意中人 </P> 

9. </DIV> 


上 面 代码 其 实 是 由 两 个 DIV 组 成 的 一 个 大 的 版 块 ， 上 面部 分 ID 为 subfeatureheaderfull 的 
CSS 代 码 如 下 所 示 。 

1. #subfeatureheaderfull H2 { 

2 BACKGROUND-COLOR: #894bal 

ek text-align:justify;<!-- 两 端 对 齐 --> 

上 述 代 码 中 ， 主 要 就 是 描述 ”最 新 活动 ”这 个 DIV 的 背景 色 。 而 下 面部 分 ID 为 
subcolumnmain 的 CSS 主 要 代码 如 下 所 示 。 


1. #subcolumnmain H3 { 

COLOR: #783492 

lk 

这 部 分 代码 的 作用 是 为 了 让 标题 更 加 醒目 ， 设 置 了 字体 的 颜色 。 

而 右边 下 面部 分 包含 姐妹 淘 、 ”聚餐 ”和 ”相亲 大 会 部 分 的 模块 ， 它 使 用 一 个 大 
DIV 包含 多 个 小 DIV 的 方式 来 实现 ， 如 图 10-10 所 示 。 
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包含 三 个 详细 内 
容 的 大 DV 


图 10-10 活动 右边 下 半 部 分 展示 效果 


这 部 分 的 关键 实现 代码 如 下 所 示 ， 在 第 2~5 行 里 ， 定 义 了 ”姐妹 淘 ”部 分 的 代码 ， 其 中 
第 5 行 通过 onMouseOver 方 法 ， 实 现 了 鼠标 移动 上 去 就 变换 图 片 的 效果 ， 其 他 部 分 的 代码 与 
姐妹 淘 ”很 相似 ， 所 以 就 不 再 做 重复 说 明 。 


1. <DIVid=maininfo> 

2 <h3> 姐 妹 淘 </h3> 

E 扩 

4 <! 这 里 显示 鼠标 移 上 去 左边 图 片 变换 的 效果 --> 

5 <DIV class="subitem corpitem" onMouseOver="document. 
getElementById('corpimage') .src='image/020.jpg'; document. 
getElementById('corplink') .href="'#';"> 

6. <H3> 聚 餐 </H3> 

Ps 

8 <! 这 里 显示 鼠标 移 上 去 左边 图 片 变 换 的 效果 --> 

民 <DIV class="subitem corpitem" onMouseOver="document. 
getElementById('corpimage') .src='image/021.jpg'; document. 
getElementById('corplink') .href="'#';"> 

0 <H3> 相 亲 大 会 </H3> 

Es 

i205 </DIVS 


酒店 介绍 网 站 


酒店 介绍 网 站 是 将 有 资质 的 酒店 信息 汇集 于 互联 网 平台 ， 供 用 户 查 阅 的 
互联 网 信息 服务 提供 商 ， 同 时 帮助 用 户 通过 互联 网 与 上 述 酒店 联系 并 预订 相 
关 旅 游 服务 项 目 。 

酒店 介绍 网 站 以 在 线 服 务 结合 呼叫 中 心 的 服务 模式 ， 为 你 办 妥 酒 店 预订 
中 的 一 切 事务 ， 并 且 为 你 提供 由 行业 资深 和 人士 采 购 的 、 最 具 竞争 力 的 价格 ， 
可 与 各 个 在 线 酒店 预订 网 站 进行 价格 比较 ， 优 惠 幅 度 明 显 、 操 作 简便 、 支 付 
安全 。 


11.1 网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 酒店 介绍 网 站 的 首页 和 ”酒店 搜索 页 面 的 设计 样式 ， 而 ”酒店 
页 面 风格 和 首页 相似 ， 所 以 就 不 再 详细 说 明了 。 


介绍 


OEE 首页 效果 分 析 


酒店 介绍 网 站 的 首页 布局 是 非常 经 典 的 ， 我 们 采用 了 三 行 的 样式 ， 其 中 ， 第 一 行 放置 网 
站 Logo、 站 内 搜索 、 网 站 导航 等 内 部 分 容 。 第 二 行 放置 ”酒店 广告 、 ”推荐 酒店 、 酒 
店 新 闻 、 ”视频 新 闻 ”、 友情 链接 “等 几 个 部 分 。 在 第 三 行 放置 部 分 导航 、 版 权 相 关 、 
网 站 Logo、 酒 店 广告 等 部 分 内 容 。 
于 首页 的 篇 幅 较 长 ， 所 以 我 们 通过 两 个 图 来 展示 整体 样式 ， 图 11-1 展 示 了 第 1 行 的 效 
果 ， 图 11-2 展 示 了 第 2、 第 3 行 的 效果 。 


全 关于 我 们 | 酒店 介绍 | 酒店 登入 | 会 员 登 录 | 酒店 加 盟 
ET a 


Ey 酒店 介绍 寻找 酒店 加 入 会 员 酒店 常识 会 员 登 录 。 博客 加 入 网 站 联系 我 们 在 线 预订 


图 11-1 首页 第 一 行 的 效果 图 


|DIV+C SS 网 站 布局 案例 精粹 (第 2 版 ) 


4-30: 黄山 老家 ， 无 事故 ， 无 一 投诉 ， 已 拥有 了 自己 的 车 队 。 


12451425 | 查询 酒店 房间 


i 
源头 ， 沿 宏 村 承志 登 上 行 50 米 即 
达 旅 馆 古 村 、 典 雅 


长 产 酒 店 ， 中 国 最 佳 主题 酒店 ， 地 处 全 国 
首 批 广州 唯一 5A 


诅 谷 山庄 他 于 闻名 世界 的 黄山 脚下 


译 谊 葵 派 建筑 文化 之 精 复 的 黄山 国际 大 ; 
店 ， 雄伟 共生。 风格 独特 。 


山东 方 最 日 酒店 


黄山 国际 大 酒店 
雄伟 莽 重 ， 风 格 独 特 


黄山 国 及 大 酒店 
是 一 家 四 星 级 大 型 商 
务 放 游 法 外 酒店 


页 山东 方 假日 酒店 
系 黄 山 放 


松 析 高 尔 俱 乐 部 
座 落 于 世界 旅游 胜地 


酒店 新 闻 部 


黄山 梅 地 亚 酒店 《 原 黄山 于 | 


位 于 黄山 机 场 大 道 六 号 。 距 机 场 、 火 车 站 和 微 杭 高 速 路 屯 溪 出 口 仅 三 公 蜂 ， 距 离 屯 
溪 老 街 1.5 公 里 ， 是 一 家 国际 化 标准 的 四 星 级 豪华 黄山 酒店 ， 特 下 北京 梅 地 亚 电视 中 
心 有 限 公司 进行 管理 。 酒 店 现 有 客房 130 套 ， 房 型 齐全 、 高 类、 和 舒适、 豪华 。 饮 食 天 
地 汇聚 了 国内 美食 精品 ， 川 、 湘 、 鼻 、 徽 菜系 独树一帜。 


黄山 抽 塔 大 酒店 


酒店 客房 各 类 齐全 ， 装 饰 豪 华 ， 具 有 标准 间 、 单 人 间 、 普 通 套房 、 豪 华 套 房 百 余 
闻 ， 提 供 的 服务 周到 细微 ， 让 宾客 有 温 贡 如 家 之 愿 。 酒店 餐饮 服务 设施 完善 ， 
有 守 会 夏 、 西 儿 厢 及 六 个 豪华 包 采 可 同时 接纳 500 人 用 餐 ， 可 接待 酒会 、 各 类 婚庆 妻 
请 。 手 艺 精湛 的 厨师 不 公 为 您 京 制品 味 纯正 的 油菜 、 云 南 菜 、 川 森 、 粤 菜 等 中 式 菜 
秆 ， 还 可 提供 品味 地 道 、 落 合 异 国 风味 的 西式 餐饮 。 酒 店 大 堂 吧 属 近 室外 只 水 池 ， 
三 楼 茶室 放眼 外 望 是 春山 环绕 ， 不 公 为 您 提供 了 一 个 静心 体 得 的 地 方 ， 更 为 您 提供 
一 个 与 好 友 相聚 的 好 去 处 。 


黄山 句 林 大 酒店 


鞭 山 狮 林 大 酒 店 位 于 北海 景区 ， 北 依 狮 子 峰 ， 海 拔 1630 米 。 四 周 环 山 ， 苞 松林 立 , 
朝 观 日 出 ， 划 党 晚 配 。 始 信 峰 、 梦 笔 生 花 、 猴 子 观 海 、 清 凉 台 、 十 八 罗 汉 朝 南海 、 
No 近 在 风 尺 。 大 酒店 东 距 云 合 索 道 1.0 公 里 ， 交 通 便捷 的 四 


闻名 世界 的 黄山 和 


全 捷 


黄山 恨 都 快 醒 酒店 “经济 付 酒 店 旅馆 间 。 焉 山 银 都 快捷 酒店 
路 公交 车 十 分 名 可 直达 汽车 站 


人 才 招 聘 | 我 们 团队 | 多 酒 语 网 保留 一 切 权利 


四 


四 


11-2 首页 第 二 、 第 三 行 的 效果 


酒店 搜索 页 面 的 效果 分 析 


在 酒店 搜索 页 


回 
如 


回 


放置 了 推广 酒店 、 特 别 策划 、 搜 索 结果 三 个 部 分 内 容 。 这 个 页 
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第 11 章 ”酒店 介绍 网 站 


要 用 于 展示 搜索 结果 如 
这 个 页 面 采 上 


和 页 脚 ， 


大 


了 三 行 样式 ， 
而 在 第 二 行 中 


行 的 效果 图 


， 包 括 推广 酒店 、 特别 策划 和 搜索 结 吉 果 组 成 的 模块 ，i 
， 如 图 11-3 所 示 。 


图 11-3 所 示 。 


行 和 


其 中 ， 第 一 行 和 第 三 行 的 样式 与 首 致 ， 都 包括 页 头 


这 里 我 们 只 给 出 


页 完全 


和 
| 北京 西 郊 饭店 
| 侈 攻 北京 感 疡 汀 大 稣 店 

| $= 
| 杭州 可 波 罗 假 日 酒店 
| Een 

| 到 a 下 
| 二 

| Ra 大 方 Fi 
特别 策划 

| 5.1 闻 让 5 天 ! 去 JR 
| 也 mihmh， 而 本 失 

| Bn: smEEEE4ooXT 


| 特惠 热 杨 酒店 、 机 标 、 压 假 厌 心 订 


特别 策划 部 分 


| wt ft 


《LEE 网 站 文件 综述 


个 页 面 的 文件 部 分 是 


比较 传统 的 ， 


五 星 级 酒店 搜索 结果 
三 亚 饥 宾 斯 其 诬 假 酒店 


三 亚 遍 记 斯 基 度 候 酒 店 生 东 在 中 国 的 最 南端 -海南 三 亚 ， 是 三 王 湾 唯 一 一 家 拥有 私家 小 梁 的 最 新 
豪 毕 五 星 缅 度 假 酒店 ， 寺 2007 年 1 月 15 日 开始 试 营业 。 酒 店 占 地 50 公 顷 ， 夯 朝 湛 蓝 无 边 的 大 海 ， 棕 榈 
和 格林 环线 四 周 、 宁 甫 而 备 适 ， 是 您 远离 城市 是 串 和 放松 身心 的 景 佳 连 择 ， 


二 


沽 新 天 哈 瓦 开 大 酒店 是 一 家 京华 型 酒店 ， 座 落 于 闻名 妈 这 的 浦东 新 区 陆家嘴 金融 贸易 中 心 ， 步 
酒店 依依 风景 秀丽 的 黄浦 江 玫 、 浦 西 全 景 尽 收 眼 


上 海 虹 桥 美亚 酒店 


上 得 虹 研 美 芯 酒 后 压 落 于 虹桥 商务 中 心地 区 ， 紫 部 红 桥 国际 机 场 和 各 大 会 展 中 心 ， 丈 可 方便 到 达 
繁 尘 的 市 中 心 酒店 是 法 国 雅高 酒店 管理 集团 旗下 以 当地 特色 著称 的 美 醋 品牌 ， 全 球 精 选中 一 位 风格 
te] 为 商旅 客人 提供 全 方位 


上 海 锦 沦 文 华 大 楂 店 

上 海 锦 党 文 华 大 酒店 拥有 豪华 客房 和 套房 ， 君 华贵 宾 廊 位 于 酒店 二 攀 ， 所 围 优 韭 ， 考 为 入 住 行政 楼 
层 的 两 务 去 人 阳 供 坚 办 服务。 同一 楼 层 的 璀 务 中 心 ， 设 施 一 源 。 每 一 位 丙 务 人 士 的 需求 都 能 得 到 清 
人 快捷 的 宽带 上 网 。 可 洪 租用 的 手提 电脑。 国际 直拨 长途 / 国际 订户 拔 号 、 旅 


北京 画 晶 酒店 


北京 责 昌 酒店 景 由 美国 卡尔 村 酒店 您 团 管理 的 涉外 酒店 ， 位 于 著名 的 北京 王府 井 商业 购物 中 心 ， 毗 
邻 王 府 井 大 街 和 故宫 、 天 安 门 广场 ， 交 通 十 分 重 利 。 北京 丽 品 酒 店 现代 而 经 肉 的 豪华 客房 及 套 
房 艾 配备 了 时 疝 的 没 旋 ， 提 供 网 锦 高 加 克 答 上 网 拱 入 ， 大 屏 藻 等 离子 入 员 电 视 以 及 DVD 播 议 机 等 


北京 金城 万 台 酒 店 


北京 金 域 万 豪 酒店 是 按照 万 豪 集团 国际 标准 建造 的 酒店 ， 册 全球 最 大 的 酒店 管理 集团 之 一 -万 京 国 
险 酒 店 集团 管理 。 酒 店 位 子 北京 城西 海 沈 区 ， 陛 因 金 融 钵 、 中 关 村 高 科 近 园区 、 北 京 展览 馆 、 北 京 大 
学 ， 清 华 大 学 等 高 等 学 府 、 的 鱼 台 国宾 馆 及 国家 政府 机 关 ， 


@ 


没有 找到 你 清 意 的 酒店 ? 
点 击 这 里 帮 念 找到 清 站 的 酒店 


图 11-3 酒店 搜索 页 面 的 效果 图 


用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 


a Ce 文件 及 其 功能 如 表 11-1 所 示 。 
表 11-1 酒店 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
[shop html 酒店 介绍 页 面 
| ago-research.html 酒店 查询 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
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11.2 规划 首页 的 布局 


四 


为 酒店 介绍 网 站 必须 简单 而 又 实用 ， 所 以 网 站 首页 的 设计 就 比较 重要 了 ， 下 面 我 们 依 
次 讲述 首页 重要 DIV 的 实现 方式 。 


搭建 首页 页 头 的 DIV 


首页 页 头 部 分 是 比较 重要 的 部 分 ， 它 不 仅 包 括 了 网 站 Logo 部 分 ， 还 包括 了 网 站 的 导航 部 
分 和 站 内 搜索 部 分 ， 这 部 分 的 效果 如 图 11-4 所 示 。 


关于 我 们 | 酒店 介绍 | 酒店 登入 | 会 员 登 录 | 酒店 加 盟 


ED = 


| | 酒店 介绍 寻 执 酒店 加 入 会 员 酒店 常识 会 员 登 录 ”博客 加 入 网 站 联系 我 们 在 线 预 订 


出 


11-4 首页 页 头 设计 分 析 图 


页 头 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <divid="header" class="margin"> 

2. <divclass="accessibility"><a href="index.html"> 首 页 </a></div> 

3. <hl><a href="index.html"><span><img src="img/agologo.gif"/></span></ 
a></h1> 

4. <divid="largenav"> 
<a id='whatson' href='#' > 关于 我 们 </a> <span>1</span> 
<fieldset> 
<input type="text" value=" 请 输入 " onfocus="this.value='';" /> 
<label for="submitsearch"> 点 击 搜索 </1abel> 

9 <input type="image" src="img/search-black.gif" value="GO" 
id="submitsearch" /> 

LQ <input type="hidden" name="cx" value="" /> 

Ls </fieldset> 

ad 

13. <ulid="smallnav"> 

14. <liid='home' class='selected'><a href="index.html"> 首 页 </a></1i> 

15. <li id='about'><a href='shop.html' > 酒店 介绍 </a></1i> 


mau 


6 
17. </ul> 
18. </div> 


其 中 ， 第 3 行 是 网 站 Logo 部 分 ， 第 5 行 是 网 站 上 导航 部 分 ， 第 6~11 行 是 站 内 搜索 部 分 ， 第 
13~17 行 是 下 导航 部 分 。 
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人 搭建 ”酒店 广告 ”部 分 的 DIV 


酒店 广告 部 分 是 由 主体 部 分 的 第 一 行 DIV 实现 的 ， 这 部 分 包含 了 酒店 的 部 分 图 片 和 超 
链 ， 这 部 分 的 效果 如 图 11-5 所 示 。 


4-30: 黄山 老家 ， 无 一 事故 ， 无 一 投诉 ， 已 拥有 了 自己 的 车 队 。 订房 电话 02T-12345678 021-12451425 本 查询 酒店 房间 


庭院 座 落 在 世界 文化 让 产地 
系 源头 ， 沿 室 村 承志 税 上 行 50 米 即 
达 旅 馆 古 村 、 典 雅 


长 座 酒 店 ， 中 国 最 佳 主题 酒店 ， 地 处 全 国 
首 批 广州 唯一 5A 


诅 谷 山庄 位 于 闻名 世界 的 黄山 车 下 


滩 请 灌 派 建筑 文化 之 精 懂 的 黄山 国际 大 酒 
店 ， 堆 伟 具 重 ， 风 格 独 特 。 


山东 方 假日 酒店 


图 11-5 航班 查询 部 分 的 DIV 效 果 图 
这 部 分 的 关键 代码 如 下 所 示 。 
1. <divclass="margin"> 
<div id="homealerts"> 
< <div class="hometoday"> 
4. <p><strong>4-30:</strong> 黄山 老家 ， ..</p> 
5 </div> 
6. <div class="homehours"> 
过 <p> 订 房 电话 021-12345678 021-12451425 &nbsp; |&nbsp; <a href=" 
房间 </a></p> 
8. </div> 
SR </div> 
10. <div class="heroslideshow"> 
ae <div class="slides"> 
2 <div class="slide"><a href="#" class="slideinfo"> 
3 <img src="img/tut slide extended.jpg" /></a></div> 
FE 
ER </div> 
16. <div class="tabs"> 


LE <div class="label"><span><a href="#"> 黑 县 宏 达 庭 院 座 落 在 世界 文化 遗产 地 一 一 宏 
村 水 系 源头 ， 沿 宏 村 承志 堂上 行 50 米 即 到 。 宏 达 旅馆 古朴 、 典 雅 <span></span></a></ 


span></div> 
Le 
FE <div class="more"><span><a href="#"> 更 多 酒店 介绍 &rarr;</a></span></ 
div> 
20u </div> 
21. </div> 
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在 上 述 代码 中 ， 第 1~9 行 是 简单 的 一 则 酒店 广告 ， 而 第 10~21 行 则 是 带 有 图 片 的 酒店 / 
告 ， 第 10~15 行 是 图 片 显示 部 分 ， 第 16~21 行 是 文字 显示 部 分 ， 这 两 个 部 分 都 以 DIV 典 套 DIV 
的 形式 来 实现 ， 而 它 的 动态 效果 则 是 由 JS 来 实现 的 ， 在 这 里 就 不 做 详细 的 叙述 了 。 


搭建 ”酒店 推广 ”部 分 的 DIV 


酒店 推广 部 分 是 由 首页 主体 部 分 第 二 部 分 DIV 实 现 的 ， 这 部 分 主要 用 于 展示 网 站 推荐 的 
一 些 酒店 ， 效 果 如 图 11-6 所 示 。 


黄山 国际 大 酒店 黄山 东方 仿 日 酒店 乐 部 黄山 国 肪 大 酒店 


山东 长 着 酒店 松柏 高 尔 俱 
雄伟 要 重 ， 风 格 独特 。 | 系 黄山 薪 州 文化 旅游 。 | 中 国 最 佳 主题 酒店 硅 秒 于 世界 旅游 性 地 。 | 是 一 家 四 星 级 大 型 商 
黄山 


集团 有 限 公司 投资 务 旅游 涉外 酒店 


网 


图 11-6 热门 旅游 线路 部 分 DIV 的 效果 


代码 如 下 所 示 。 


1. <divid="exhibitions"> 

2 <h2>gnbsp; </h2> 

< <div class="item homeb0"> 

4. <div class="thumb"><a href="#"> <img alt="" src="img/kingtut-2010-135. 
jpg" /></a> </div> 

5 <p><a href="#"> 园 县 宏 达 庭 院 </a><br /> 

6. 座 落 在 世界 文化 遗产 地 一 一 宏 村 水 系 源头 </p> 

i </div> 

Ds 

3 </div></div> 


酒店 推广 部 分 的 代码 的 结构 是 一 样 的 ， 这 里 就 只 给 出 一 个 作为 示范 ， 如 果 有 需要 请 自行 
从 与 本 书 配套 的 下 载 资源 中 获取 ， 这 里 要 注意 的 就 是 每 个 酒店 的 左边 图 片 不 一 样 ， 不 能 引 
相同 的 图 片 。 


人 IE 搭建 酒店 新 闻 部 分 的 DIV 


酒店 新 闻 部 分 是 首页 主体 第 三 部 分 左边 的 部 分 ， 这 部 分 展示 的 是 酒店 新 闻 ， 这 部 分 的 效 
果 如 图 11-7 所 示 。 
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酒店 新 闻 em) 最 新 | 博客 | 相关 守则 


黄山 梅 地 亚 酒店 〔 原 黄山 建国 商务 酒 扩 

位 于 黄山 机 场 大 道 六 号 。 距 机 场 、 火 车 站 和 油 杭 高 速 路 屯 溪 出 口 仅 三 公里 ， 距 离 屯 
诅 老 街 1.5 公 里 ， i es 
心 有 限 公司 进行 管理 。 酒 店 现 有 客房 130 套 ， 房 、 高 贵 、 议 食 天 
地 汇聚 了 国内 美食 精品 ， 川 、 湘 、 粤 、 人 


黄山 红塔 大 酒店 
酒店 客房 各 类 齐全 ， 装 饰 豪华 ， 具有 标准 间 、 单 人 间 、 蕴 通 套房 - 豪华 套房 百 余 


是 表 山 环绕 ， A Cr 


楼 茶室 放眼 外 : 
区 


黄山 条 林 大 酒店 


et 北 依 驿 子 峰 ， 海 撤 1630 米 。 四 周 环 山 ， 苍 松林 立 ， 
参观 日 出 ， 莫 赏 晚 徐 。 始 信 蜂 、 梦 笔 生 花 、 装 子 观 海 、 清 凉 台 、 十 八 罗汉 1 
和 仙人 下 术 等 胜 晤 ， 近 在 愿 尺 。 大 酒店 革 距 云 全 索道 1 0 公里， 交通 便捷 的 四 


图 11-7 酒店 新 闻 部 分 的 效果 


下 面 给 出 这 个 DIV 的 关键 代码 。 

1. <div id="news"> 

2 <h2> 酒 店 新 闻 </h2> 

3 <p class="links"><a href="#" > 最 新 </a><span> | </span><a href="#"> 博 客 </ 
a><span> | </span><a href="#"> 相 关 新 闻 </a></p> 

4. <div class="itemhomec0"> 

多 <div class="thumb"><a href="#"> <img alt="" src="img/G31910-80.jpg" 
/></a> <ahref="#" class="moreinfo">Image information</a></div> 

6. <h3><a href="#"> 黄 山 梅 地 亚 酒店 〈 原 黄山 建国 商务 酒店 ) </a></h3> 

Ts <p> 位 于 黄山 机 场 大道 六 号 。 距 机 场 、 火 车 站 和 微 杭 高 速 路 屯 溪 出 口 仅 三 公里 ， 距 离 屯 溪 老 
街 1 .5 公里 ， 是 一 家 国际 化 标准 的 四 星 级 豪华 黄山 酒店 ,特聘 北京 梅 地 亚 电视 中 心 有 限 公司 
进行 管理 。 酒 店 现 有 客房 130 套 ， 房 型 齐全 、 高 贵 、 每 适 、 豪 华 。 饮 食 天 地 汇聚 了 国内 美食 
精品 ， 川 、 湘 、 粤 、 微 菜系 独树一帜 。. . .</p> 

8. </div> 

A 

10. </div> 

其 中 ， 因 为 其 余 两 条 新 闻 的 实现 方法 与 这 一 条 新 闻 是 相同 的 ， 所 以 这 里 就 不 再 重复 说 明 


了 。 


在 上 述 代 码 中 ， 第 2 行 和 第 3 行 是 DIV 标题 部 分 ， 第 4-9 行 是 DIV 正文 部 分 。 


册 尼 汪 搭建 ”视频 新 闻 ”部 分 的 DIV 
在 视频 新 闻 部 分 中 放置 一 个 新 闻 视频 模块 ， 这 部 分 的 效果 如 图 11-8 所 示 。 
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视频 新 闻 部 分 


| 


于 


11-8 视频 新 闻 部 分 的 DIV 效果 


关键 代码 如 下 所 示 。 


1. <divid="aod"> 
2 <h2> 视 频 新 闻 </h2> 


3 <div id="aodslideshow"><img src="img/288330.jpg" border="0" /></div> 
4. </div> 


搭建 ”友情 链接 部 分 的 DIV 
友情 链接 部 分 是 由 友情 链接 部 分 和 赞助 商 链 接 部 分 组 成 ， 效 果 如 图 11-9 所 示 。 


“EE El Bl i Ee 


11-9 友情 链接 部 分 的 DIV 
给 出 这 部 分 DIV 的 关键 代码 。 


现 


“| 
加 | 


1. <divclass="sponsors" id="sponsors home"> 


- <h2>gnbsp;</h2> 

3 <div class="row"> 

4. <div class="left" id="signature"> 

sR <h3> 友 情 链 接 </h3> 

6. <table width="99%" border="0" cellspacing="0" cellpadding= 
style="text-align:center;"> 

Er 

:二 <td><img src="img/10040.jpg" /></td> 

间 <td><img src="img/10040.jpg" /></td> 

10. <td><img src="img/10040.jpg" /></td> 

LL </tr> 


RE 二 
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L135 </div> 

I <div class="right" id="media"> 

1 <h3> 赞 助 商 链接 </h3> 

16. <table width="99%" border="0" cellspacing="0" cellpadding="0" 
style="text-align:center;"> 

Ei 


18. <td><img src="img/10040.jpg" /></td> 
19. <td><img src="img/10040.jpg" /></td> 
20<XEz> 

21. </table> 

7 </div> 

有 3 </div> 

24. </div> 


从 上 述 代 码 中 可 以 看 出 ， 友 情 链接 部 分 其 实 是 由 DIV+TABLE 组 成 的 ， 这 种 组 合 模式 在 
前 文中 已 经 介绍 过 了 ， 这 里 就 不 再 介绍 了 。 


搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明 、 网 站 Logo 和 酒店 广告 等 内 容 ， 效 果 如 图 11-10 
所 示 。 


黄山 凤 下 ， 再 山 江水， 三 元 如 红 之 中 


由 网 站 页 即 部 分 es 


@ 酒 后 网 保 久 一 倪 权 各 


图 11-10 页 脚 部 分 的 DIV 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 代 码 比 较 简单 ， 这 里 就 不 再 做 说 明了 。 


1. <divid="footer"> 

2 <div class="info"> 
< 
四 


<p> 黄山 溪 谷 山庄 ”经 济 型 酒店 旅馆 
溪 谷 山庄 位 于 闻名 世界 的 黄山 脚下 ， 青 山 绿 水 ， 云 雾 绑 绕 之 中 ， 让 您 倍 感 舒适 。 酒 店 距 黄山 风景 
区 换 乘 中 心 及 合 铜 黄 高 速 只 有 1 公里 ， 交 通 便捷 。</P> 
5 <p> 黄山 银 都 快捷 酒店 经 济 型 酒店 旅馆 
6. 间 ”黄山 银 都 快捷 酒店 位 于 黄山 市 市 区 阜 上 路 4 号 ， 距 机 场 5 公 里 ， 步 行 5 分 钟 便 是 火车 站 ，9 路 


公交 车 十 分 钟 可 直达 汽车 站 </p> 
网 </div> 
8. <div class="links"> <a href="#"> 人 才 招 聘 </a> <span>1</span> <a href="#"> 我 
们 团队 </a> <span>1</span> <a href="#">&copy; 酒店 网 保留 一 切 权利 </a> </div> 
9. </div> 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 11-2 所 示 。 
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表 11-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div id="largenav"> 定义 字体 大 小 、 悬 浮 方式 和 字体 对 齐 

方式 ， 并 定义 a 标签 选中 后 的 效果 

#largenav { 


font-size: 16px:; 


float: right; 
margin: .8em 0; 关于 我 们 | 酒店 介绍 | 
text-align: right; 

} 

#largenav a.selected { 
color: #000; 

} 

<div class='blog-entries> | 定义 颜色 、 宽 度 、 字 体 对 齐 方式 和 悬 

.homehours { 
color: #666; 
width: 441px: 订房 电话 021-12345678 021-12451425 | 
float: right; 
text-align: right; 

3 


<div id="exhibitions"> 定义 外 边框 ， 定 义 悬 浮 方式 
#exhibitions { 
margin: 18px 0px 18px Opx; 


overflow: auto; 


float: left; 
} 


114.3 ”在 首页 中 实现 动态 效果 


在 首页 中 ， 我 们 用 鼠标 移 到 一 些 图 片上 ， 会 出 现 一 些 悬 浮 文字 用 于 提示 ， 如 图 11-11 所 


不 。 
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图 11-11 出 现 悬 浮 效果 的 样式 图 


这 种 效果 具有 一 定 的 典型 性 ， 具 体 实现 代码 如 下 所 示 ， 其 中 在 第 2 行 里 定义 一 个 a 标签 ， 
有 E 需 要 注意 的 是 ， 把 提示 性 文字 写 在 title 属 性 里 ， 而 在 第 3 行 中 ， 则 引入 了 这 个 DIV 里 的 图 


E 


这 
片 。 


1. <divclass="slide"> 


2. <a href="#" title=" 黄 山 翡 尉 人 家 度假 村 于 2003 年 建成 ， 是 一 片 私营 休闲 生态 农家 乐 度假 
村 ， 位 于 中 国 。 黄 山 * 翡 翠 谷 风景 区 ， 占 地 面积 500 亩 。 这 是 一 片 别 墅 式 生态 休 闲 农家 乐 ， 各 种 名 贵 花木 ， 
造型 各 异 ， 争 奇 斗 艳 ， 周 边 环境 十 分 优美 ， 梨 桃 掩映 其 中 。" class="slideinfo" > 

De <img alt="" src="img/new-SAT-slide-600x300.jpg" /> 

4. </a> 

me </div> 


上 面 代 码 中 ， 使 用 标签 的 title 属性 ， 可 以 让 鼠标 放 在 超 链接 上 的 时 候 ， 显 示 该 超 链接 的 
文字 注释 。 在 首页 中 ， 多 处 用 到 了 这 种 实现 方式 ， 如 图 11-12 所 示 。 


Ml 4 PT 


图 11-12 title 属 性 效果 图 


11.4 酒店 搜索 页 面 


酒店 搜索 页 面 是 以 显示 搜索 结果 为 主 的 一 个 页 面 ， 该 页 面 除 了 显示 搜索 结果 外 ， 还 包括 
推广 列表 和 特别 策划 这 两 个 部 分 内 容 。 下 面 我 们 详细 说 明 。 
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EETED 


酒店 搜索 页 面 左 边 部 分 的 DIV 


酒店 搜索 页 面 的 列表 没有 使 用 我 们 常用 的 ul 和 上 i 设计 ， 而 使 


北京 西 苑 饭店 
酒店 列表 


金 茂 北 京 威 斯 汀 大 谍 店 
: 
剂 马 可 波 罗 假 日 酒店 
厦门 美 仑 娃 晖 酒店 


青岛 海景 花园 大 酒店 


用 了 一 个 红色 外 框 的 DIV， 它 是 一 个 包含 多 个 列表 的 DIV， 如 图 
11-13 所 示 。 这 说 明 实 现 方法 是 多 种 多 样 的 ， 尤 其 是 编程 ， 解 决 
方案 永远 不 止 一 个 ， 我 们 只 是 希望 编写 的 代码 能 做 到 代码 量 少 、 
简单 、 容 易 理 解 。 

上 图 使 用 了 两 组 ul 和 li 组 合 实现 了 推广 和 策划 这 两 个 部 分 的 
样式 ， 其 代码 如 下 所 示 。 


6 <div id="leftnav"> 
广州 长 隆 酒 店 
2 <h2> 特 别 推广 酒店 </h2> 
成 部 新 东方 生姜 大 酒店 3 <ul> 
E a <1li class="swatchl" ><a href="#"> 北 京 西 苑 饭 
| HimesR! Emm? 人 
| wmaitm， Elexi 6 a 
| 起 值 ! 5 星 酒店 锋 至 400 元 以 下 Ds <h2> 特 别 策划 </h2> 
- 9 <ul> 
| MY 9 <1i class="swatchl" class="expanded"> 
| Ea, 10. <a class="selected" href="#"> 上 海 5.1 节 放 
Z 5 天 ! 去 哪儿 玩 ? </a></1i> 
LY 
图 11-13 左边 部 分 效果 图 D2 </ul> 
Ls </div> 


这 种 使 用 ul+li 的 组 合 是 比较 常见 的 ， 这 里 就 不 做 详细 说 明 ， 需 要 注意 的 就 是 第 1 行 引 用 了 
ID 为 leftnav 的 CSS， 这 个 CSS 定 义 了 此 1i 标 签 的 上 下 边框 ， 其 代码 如 下 所 示 。 


Eh 
有 
入 
4 
5 
6 


. #leftnavullit{ 


border-top: 1px solid #ccc; // 定 义 此 1i 的 上 边框 
border-bottom: 1px solid#ccc; // 定 义 此 1i 的 下 边框 
margin-bottom: 9px; 
padding: 9px 0 9px 16px; 

} 


酒店 搜索 页 面 右边 部 分 的 DIV 


活动 页 面 右边 部 分 是 搜索 结果 部 分 ， 显 示 了 搜索 出 来 的 酒店 名 称 及 其 介绍 ， 其 页 面 效 果 
与 左边 部 分 差不多 ， 但 是 实现 的 方法 有 些 区 别 ， 这 部 分 的 效果 如 图 11-14 所 示 。 


五 星 级 酒店 搜索 结果 


第 11 章 


酒店 介绍 网 站 


三 亚 遍 宾 斯 基 度 假 酒店 


三 亚 凯 宾 斯 基 度 假 酒店 坐落 在 中 国 的 最 南端 -海南 三 亚 ， 是 三 亚 湾 唯 一 一 家 拥有 私家 沙滩 的 最 新 
京华 五 星 级 度假 酒店 ， 于 2007 年 1 月 15 日 开始 试 营业 。 酒 店 占 地 50 公 顷 ， 面 朝 湛蓝 无 边 的 大 海 ， 棕 榈 
和 椰 林 环绕 四 周 、 宁 甫 而 千 适 ， 是 您 远 高 城市 喧嚣 和 放松 身心 的 最 佳 选择 


上 海 新 天 哈瓦那 大 酒店 


上 海 新 天 哈瓦那 大 酒店 是 一 家 豪华 型 酒店 ， 座 落 于 闻名 腺 途 的 浦东 新 区 陆家嘴 全 融 贸易 中 心 ， 步 
dest leech 酒店 依 傍 风 景 秀丽 的 黄浦 江 畔 、 浦 西 全 景 尽 收 照 


上 海 虹桥 美 于 酒店 


上 海 虹桥 美 栈 酒店 座 落 于 虹桥 商务 中 心地 区 ， 花 人 虹桥 国际 机 场 和 各 大 会 展 中 心 ， 亦 可 方便 到 达 
繁华 的 市 中 心 。 酒 店 是 法 国 雅高 酒店 管理 集团 旗下 以 当地 特色 著称 的 美 醋 品牌 ， 全 球 精 选中 一 位 风格 
生生 计 ， 二 和 新 本 所 拓 的 于 从 人 训 式 克 册 本 0 全 的 客 谓语 为 商旅 客人 提供 全 方位 


上 海 锦 沦 文 华 大 酒店 


上 海 锦 沧 文 华 大 酒店 拥有 豪华 客房 和 套房 ， 君 华贵 宾 订 位 于 酒店 二 楼 ， 氛 围 优雅 ， 专 为 入 住 行政 楼 
层 的 商务 客人 提供 温 警 服务 。 同 一 楼 层 的 商务 中 心 ， 设 施 一 流 。 每 一 位 商务 人 士 的 需求 都 能 得 到 满 
是。 人 快捷 的 宽带 上 网 、 可 供 租用 的 手提 电脑 、 国 际 直 失 长 途 / 国际 订户 拔 号 、 旅 


北京 而 晶 酒店 


北京 丽 晶 酒店 是 由 美国 卡尔 森 酒店 集团 管理 的 涉外 酒店 ， 位 于 著名 的 北京 王府 井 商业 购物 中 心 ， 楷 
邻 王府 井 大 街 和 故宫 、 天 安 门 广场 ， 交 通 十 分 便利 。 北京 丽 晶 酒店 现代 而 经 典 的 豪华 客房 及 套 
房 均 配备 了 时 尚 的 设施 ， 提 供 免费 高 速 宽带 上 网 接 入 ， 大 屏幕 等 离子 液晶 电视 以 及 DVD 播放 机 等 


北京 金城 万 豪 酒店 


北京 金城 万 衣 酒 店 是 按照 万 家 集团 国际 标准 建造 的 酒店 ， 由 全 球 最 大 的 酒店 管理 集团 之 一 一 万 胡 国 
际 酒店 集团 管理 。 酒 店 位 于 北京 城西 海淀 区 ， 紫 邻 金 融 衔 、 中 关 村 高 科技 图 区 、 北 京 展览 馆 、 北 京 大 
学 、 清 华 大 学 等 高 等 学 府 、 钓 鱼 台 国宾 馆 及 国家 政府 机 关 


没有 找到 你 清 意 的 酒店 ? 
点 击 这 里 帮 和 您 找到 清 意 的 酒店 


图 11-14 右边 部 分 效果 图 


实现 此 部 分 的 DIV 代码 如 下 所 示 。 


1. <div id="content" class="1isting"> 
<h2> 五 星 级 酒店 搜索 结果 </h2> 


<div class="item swatch0"> 


之 
3 
4. 
2 
6- 
汪汪 
8 . 
9。 
10. 
11. 


上 面 


<h3><a href="#" 
<p> gnbsp; &nbsp; gnbsp; &nbsp; 三 亚 凯 宾 斯 基 度 假 酒店 坐落 


</div> 


三 亚 凯 宾 斯 基 度假 酒店 </a></h3> 


<div id="utilities"> 
<p class="link"><a href=""> 没 有 找到 你 满意 的 酒店 ? <br /> 
点 击 这 里 帮 您 找到 满意 的 酒店 </a></p> 
</div> 
12. </div> 


代码 中 ， 


AN 


样 的 ， 这 里 就 不 给 出 代码 了 ， 如 有 需要 请 从 与 本 书 配套 的 下 载 资源 中 获取 。 


/Dp 


我 们 只 给 出 显示 一 个 搜索 结果 的 代码 ， 其 余 搜索 结果 的 搭建 方法 其 实 是 一 


这 里 要 注意 的 就 是 ， 每 个 搜索 结果 的 DIV 引用 的 CSS 是 不 同 的 ， 只 有 引用 了 不 同 的 CSS 才 
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会 在 每 个 搜索 结果 的 左边 显示 颜色 不 一 样 的 图 片 ， 下 面 我 们 只 给 出 与 DIV 代 码 相 匹配 的 CSS 
代码 。 


. /* 这 部 分 定义 所 引用 的 图 片 */ 

.Swatch0, .homeb0 { 
background-image: url(../img/swatch70.gif); 
background-repeat: repeat-y; /* 图 片 纵向 拉 伸 */ 


} 
. /这 部 分 定义 搜索 结果 的 上 边框 */ 
.listing .swatch0 { 

border-top: lpx solid #ccc; 

9. margin-top: 9px; 
Ee 
11. /* 这 部 分 定义 了 整个 搜索 结果 DIV 底部 的 边框 */ 
12. .listing .item { 


a 
2 
= 
4 
局 
6 
_ 
8 


3 clear: both; 

14. width: 100%; 

EG overflow: hidden; 

ED border-bottom: lpx solid#ccc; 
Ee 


在 上 面 代码 中 给 出 了 实现 这 个 DIV 效 果 的 一 部 分 重要 的 CSS， 正 是 使 用 了 这 几 个 CSS 的 组 
合 ， 搜 索 结果 部 分 的 显示 效果 与 左边 部 分 相似 。 

这 里 要 注意 的 就 是 第 8 行 和 第 16 行 ， 它 定义 了 DIV 的 边框 为 可 见 的 ， 并 设置 其 颜色 ， 这 种 
做 法 在 DIV 中 很 常见 。 使 用 了 这 个 方法 ， 边 框 将 不 再 需要 使 用 图 片 来 显示 。 


教育 网 站 


随 着 社会 发 展 ， 社 会 对 人 才 的 素质 要 求 越 来 越 高 ， 所 以 ， 从 学 校 里 毕业 
踏 上 社会 的 人 们 也 需要 不 断 地 充实 自己 ， 从 各 类 “继续 教育 ”学 校 里 获取 各 
种 知识 。 

在 这 种 形势 下 ， 教 育 网 站 应 运 而 生 ， 在 其 中 包含 了 不 同 种 类 学 校 的 信息 
以 及 这 些 学 校 的 特色 。 本 章 我 们 就 来 分 析 一 下 这 类 网 站 的 实现 方式 。 


12.1 ”网 站 页 面 效果 分 析 


本 章 将 着 重 分 析 教育 网 站 的 首页 和 ”教育 中 心 ”页 面 的 设计 样式 ， 而 “新闻 中 心 ”页 面 
风格 和 ”教育 中 心 ”比较 相 似 ， 所 以 就 不 再 分 析 了 。 


人 ER 首页 效果 分 析 


教育 网 站 的 首页 布局 是 非常 经 典 的 ， 如 图 12-1 所 示 ， 我 们 将 采用 三 行 的 样式 ， 其 中 ， 
第 一 行 放置 网 站 Logo、 站 内 搜索 、 网 站 广告 、 网 站 导航 等 部 分 内 容 。 第 二 行 放置 ”行业 
发 展 、 ”新闻 、 课程 分 析 等 几 个 部 分 。 在 第 三 行 里 放置 的 是 部 分 导航 和 版 权 相 
关 信 息 。 

在 第 二 行 框架 里 ， 主 要 分 为 两 行 ， 第 一 行 是 行业 前 景 和 业内 新 闻 ， 第 二 行 则 是 站 内 功能 
导航 和 培训 相关 技术 简介 。 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 


a 


教育 培训 


教育 中 心 。 ”新 闻 中 心 


2010-3-30 ”IT 培训 对 中 国 职业 培训 及 本 业 的 影响 
2010-4-30 国家 重点 软件 企业 名 单 发 布 上 海 27 家 企业 上 榜 


订阅 电子 新 闻 SuperAgent 网 络 应 用 性 能 。 ASP.NET 的 五 大 数据 控件 法 
eNet 六 入 在 线 管 分 析 仪 次 


人 

和 两 并 入 齐 和 1 前 3 个 

i 3 芝 折 东 过 离 网 络 应 用 响应 时 间 问题 识别 。 2 个 用 于 呈现 单条 数据 明细 , 即 常 
网 络 、 或 应 用 程序 造成 的 延迟 。 ”用 的 记录 明细 。 


教育 培训 网 加 2010 保 留 一 切 权利 


图 12-1 首页 效果 图 


教育 中 心 页 面 的 效果 分 析 


教育 中 心 页 面 如 图 12-2 所 示 ， 它 放置 了 教学 一 览 的 分 类 及 其 详细 内 容 ， 通 过 这 个 页 面 展 
示 这 个 培训 中 心 的 教学 力量 。 

这 个 页 面 采 用 了 三 行 样式 ， 其 中 ， 第 一 行 和 第 三 行 的 样式 与 首页 是 完全 一 致 的 ， 都 包 
页 头 和 页 脚 ， 而 在 第 二 行 里 ， 用 教学 一 览 分 类 导航 加 上 详细 内 容 组 成 页 面 ， 图 12-2 是 第 二 行 


HR 
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GR 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 


按照 学 生 ! 
及 所 选择 


图 12-2 教育 中 心 页 面 的 效果 图 


第 12 章 ”教育 网 站 


” 
业 指导 


就 

的 学 历 ， 基 础 水 学 院 拥有 一 批 从 事 国内 后 训 教 育 的 ”学院 为 所 有 学 生 提供 岗位 就 业 的 考 

的 专业 ， 进 行 个 性 ”专业 师资 力量 ， 从事 教育 培训 10 。 业 指 导 , 包括 职业 素质 教育 ， 考 

程 安排 。 满 足 不 同 当 生 的 党 ”年 以 上 ,他们 是 学 院 高 质量 培训 的 ”强化 训 绮 ， 岗 位 需求 培训 等 多 个 方 
基础 。 面 , 7 


img、css 和 scripts 三 个 目录 分 别 放置 网 站 所 用 到 的 


图 片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 12-1 所 示 。 
表 12-1 科教 类 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 

| three.html 教育 中 心 页 面 

[two.html 新 闻 中 心 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
scripts 目 录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
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12.2 规划 首页 的 布局 


教育 网 站 需要 采用 简单 而 又 实用 的 风格 ， 所 以 网 站 的 首页 设计 就 比较 重要 了 。 下 面 我 们 
就 来 依次 讲述 其 中 重要 DIV 的 实现 方式 。 


搭建 首页 页 头 的 DIV 


首页 页 头 部 分 比较 重要 ， 它 必须 包括 网 站 Logo 部 分 、 网 站 的 导航 部 分 和 站 内 搜索 部 分 。 
页 头 的 效果 如 图 12-3 所 示 。 


ER | 可 系 衣 人 | 大 fF 度 们 | 才华 


“ED 


和 教育 培训 网 


教育 中 心 新 闻 中 心 IT 加 盟 就 业 广场 ” 知识 中 心 。 在 线 咨询 


图 12-3 首页 页 头 设计 分 析 


页 头 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <divid="head"> 

2. <ulclass="assist-text"> 

局 <li><a href="#" accesskey="s"></a></1i> 

4. <li><a href="#" accesskey="0"></a></1i> 

Sa. </L 

6. <ulid="global-nav"> 

人 <1li class="active"><a href="index.html" accesskey="1"> 首 页 </a></1i> 


2 Re 

9 <1i id="search-1i"> 

Os <p> 

Eh <label for="ajaxSearch input" class="assist-text">Search</label> 

3 <input id="ajaxSearch _ input" type="text" name="search" value=" 请 输入 " 
onfocus="this.value= (this.value==' 请 输入 ')? '' : this.value ;" /> 

< <button id="ajaxSearch submit" type="submit" value="Go!"> 搜 索 </ 
button> 

民国 </p> 

FE 

6 </0l> 


17. <divid="header"> 

18. <pid="logo"><strong><a href="index.html">logo</a></strong></p> 
19 <ALg> 

20. <ul id="main-nav"> 

21. <liid="main nav2"><a href="two.html"accesskey="2"> 首 页 </a></1i> 
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YA 如 
23s </ul> 
24. </div> 


第 12 章 ”教育 网 站 


其 中 ， 第 6~16 行 是 包含 在 一 个 ul 中 的 ， 这 几 行 代码 实现 了 网 站 的 上 导航 和 网 站 的 站 内 搜 


索 部 分 ， 第 17~19 行 是 网 站 Logo 部 分 ， 第 20~23 行 是 网 站 的 下 导航 商 


分 ， 就 是 这 几 个 部 分 组 成 


了 首页 的 页 头 部 分 。 


在 上 述 代 码 中 ， 第 17 行 定义 了 ID 为 header 的 CSS， 这 个 CSS 引 用 了 一 张 背 景 图 片 ， 这 张 背 


景 图 片 就 是 Logo 下 的 广告 图 ， 其 CSS 代 码 如 下 所 示 。 


1. #header { 


2 background:#EBFOD]1 url(../img/home banner.jpg) left center no- 


repeat 
过 


搭建 ”行业 前 景 ” 部 分 的 DIV 


行业 前 景 部 分 是 首页 第 二 行 主体 上 半 部 分 的 
左边 主体 ， 这 部 分 的 效果 如 图 12-4 所 示 。 


vr- 


pr 
这 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 第 3 行 : 


定义 了 文字 上 方 的 图 片 ， 从 第 5~11 行 里 ， 给 出 了 
IT 培训 ”部 分 的 样式 , 而 教育 加 盟 和 院 
校 合 作 ”部 分 的 代码 和 ”IT 培训 很 相似 ， 这 里 


图 12-4 行业 前 景 部 分 的 DIV 效 果 图 


</a></hl> 


-</B> 


就 不 再 重复 分 析 了 。 
1. <divid="gardens-panel"> 
2 <div id="slideshow"> 
3 <img src="img/edinburgh.jpg" width="375" height="170" /> 
</div> 
3 <div id="gardens-panel-content"> 
6 <hl><a href="#"> 关 注 IT 教 育 年 度 盛 典 产业 升级 成 为 焦点 
gt <p> 中 国 IT 教 育 15 年 来 经 历 过 三 个 主要 阶段 ”</p> 
3 <div class="gardenp"> 
9. <h2><a href="#">IT 培 训 </a></h2> 
0 <p> 用 与 企业 吻合 、 与 市 场 紧 贴 </p> 
Eh </div> 
Eb <div class="gardenp"> 
13 <h2><a href="#"> 教 育 加 盟 </a></h2> 
14. <p> 我 们 以 授权 培训 中 心 的 方式 在 全 国 各 大 , 中 型 城市 建立 
EE </div> 
16- <div class="gardenp lastgp"> 
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拍 属 <h2><a href="#"> 院 校 合作 </a></h2> 

18. <p> 我 们 已 经 与 诸多 知名 院 校 有 了 良好 的 合作 办 学 经 验 。 <br /> 
EC </p> 

20. </div> 

2 </div> 

22. </div> 


在 上 面 代码 中 的 第 8、12 和 16 行 里 ， 使 用 了 ID 为 gardenp 的 CSS， 它 定义 了 DIV 的 宽度 、 悬 
浮 方式 和 外 边 距 ， 这 部 分 的 CSS 代 码 如 下 所 示 。 


1. .gardenp { 

2 width:107pxy /* 定 义 宽度 */ 

3 float :left; /* 定 义 悬浮 方式 */ 

4 margin:10px 8px 0 0 /* 定 义 外 边 距 */ 
5. } 


搭建 ”重要 新 闻 “部 分 的 DIV 


在 本 网 站 中 ， ”重要 新 闻 ”部 分 用 来 展示 学 校 的 一 些 重要 新 闻 ， 这 部 分 的 效果 如 图 12-5 
所 示 。 


2010-3-30 。 IT 培训 对 中 国 职业 培训 及 就 Jp 


2010-4-30 。 国家 重点 软件 企业 名 单 发 布 上 海 27 家 企业 上 榜 


图 12-5 重要 新 闻 部 分 DIV 的 效果 图 
这 部 分 的 代码 如 下 所 示 ， 由 于 其 代码 比较 简单 ， 这 里 就 不 再 分 析 了 。 


1. <divid="news-events"> 

全 <h2 id="what-o"> 新 闻 <a href="#" class="morelinks"> 更 多 信息 </a></h2> 

3 <ul id="upcoming-events" class="events-list"> 

4. <li><span class="date">2010-3-30</span><a href="#">IT 培 训 对 中 国 职业 培 
训 及 就 业 的 影响 </a></1i> 

5 <1li><span class="date">2010-4-30</span><a href="#"> 国 家 重点 软件 企业 名 单 
发 布 上 海 27 家 企业 上 榜 </a></1i> 

6. </ul> 

Ty 


搭建 ”订购 电子 新 闻 “等 部 分 的 DIV 


首页 的 页 脚 上 方 包括 ”订阅 电子 新 闻 、 ”网 站 导航 ”等 部 分 的 DIV， 效 果 如 图 12-6 
所 示 。 


订阅 电子 森 闻 ASP.NET 的 五 大 数据 控件 法 
我 们 会 定期 村 新 闻 发 送 到 你 gp 盆 析 仪 次 
箱 内 中 使 用 服务 经 别管 理 ¢ SLA》 2 ASP.NET 数据 控件 :Gi 

了 网络 应 用 性 害 快速 隔 。 :前 a 访 
训 网 络 应 用 啊 应 时 间 问 题 识别 。 2 个 用 于 呈现 单条 数据 明细 ， 
网 络 、 或 应 用 程序 造成 的 延迟 


[和 入 是 币 ji 


图 12-6 订购 电子 新 闻 部 分 的 效果 
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下 面 给 出 这 个 DIV 的 关键 代码 ， 其 中 ， 第 9 行 定义 了 供用 户 输入 的 文本 框 ， 而 第 10 行 定义 
了 订阅 按钮 。 


. <divid="sub-panels"> 


出 

受 <div> 

3 <div class="sub-panel"> 

4 <h3> 订 阅 电子 新 闻 </h3> 

sR <p> 我 们 会 定期 将 新 闻 发 送 到 你 的 邮箱 内 </p> 

6 <form method="post"> 

六 <p> 

8 <label class="assist-text" for="mb-juhjd-juhjd"> 邮 箱 :</1label> 

95 <input class="cleardefault" id="mb-juhjd-juhjd" name="mb-juhjd-— 
juhjd" size="14" type="tezxt" value=" 请 输入 邮箱 " /> 

10. <input class="button" name="submit" type="submit" value=" 订 阅 " /> 

Ds </p> 

12. </form> 


L332 </div> 

14. 省 略 其 他 三 部 分 的 DIV 定义 
15s </div> 

16. </div> 


《到 一 搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 比较 简单 ， 包 含 了 菜单 导航 和 版 权 说 明 两 块 内 容 ， 效 果 如 图 12-7 所 示 。 


教育 培训 网 @@ 2010 保 留 一 切 权 利 返回 首页 。 网 站 地 图 。 法 律 条 款 。 联系 我 们 。 友情 链接 合作 渠道 


图 12-7 页 脚 部 分 的 DIV 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 其 中 ， 第 3 行 定义 了 版 权 信息 ， 而 从 第 4~11 行 用 ul 和 上 ti 
的 方式 定义 了 右边 部 分 的 导航 菜单 。 


1. <div id="site-info"> 

2 <div> 

3 <p> 教 育 培训 网 @ 2010 保 留 一 切 权 利 </p> 

4. <ul> 

5 <1i><a href="#" accesskey="0"> 返 回首 页 </a></1i> 
6 <1i><a href="#" accesskey="9"> 网 站 地 图 </a></1i> 
<1i><a href="#" > 法 律 条 款 </a></1i> 

8. <1i><a href="#" > 联系 我 们 </a></1i> 

9. <1i><a href="#" > 友情 链接 </a></1i> 

本 0 <1li class="last"><a href="#" > 合作 渠道 </a></1i> 
FE </ul> 

12. </div> 

13. </div> 


下 于 首页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 在 这 里 ， 我 们 将 用 表格 的 形式 描 
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述 首页 中 其 他 CSS 的 效果 ， 如 表 12-2 所 示 。 


表 12-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 


CSS 描 述 和 关键 代码 效果 图 


<li id="main_nav2"><a 


href= "two.html" 


鼠标 悬浮 上 后 ， 更 改 背 景 颜色 


#main_nav2 a:hover { 


accesskey="2"> 首 页 </a></ background:#638C19 
li> } 
<div class="gardenp"> 定义 宽度 ， 悬 浮 方式 和 外 边 距 
.gardenp { 
width:107px; 
float:left; 
margin:10px 8px 00 
<h2 id="what-o">| 定 义 背景 色 
新 闻 <a href= # |#what-o{ 


morelinks 


> 更 多 
信息 &raquo;</a></h2> 


class= 


<span class="date">2010-3- 
30</span> 


background:url(../img/ 
whatson-h.gif) left center no- 
repeat; 
} 
定义 悬浮 方式 和 宽度 
#span.date { 

float:left; 


width:7em; 


2010-3-30 


12.3 ”教育 中 心 页 面 


本 节 将 分 析 一 个 专门 的 教育 中 心 页 面 ， 它 包括 ”师资 队伍 、 


教学 管理 和 课程 安 


排 等 信息 。 


教学 一 


Ji 


下 面 就 来 看 一 下 其 中 重要 部 分 的 DIV 的 实现 方式 。 


I 


部 分 的 DIV 


教育 中 心 页 面 中 包含 的 信息 比较 多 ， 在 页 五 


的 左 侧 ， 我 们 使 用 导航 菜单 的 方式 以 方便 


户 的 访问 ， 这 部 分 的 效果 如 图 12-8 所 示 。 


第 12 章 ”教育 网 站 


图 12-8 ”教学 一 览 ”部 分 的 效果 图 


这 部 分 使 用 ul 和 1i 的 方式 来 定义 菜单 ， 关 键 代码 如 下 所 示 。 


1. <div id="sub-nav"> 

2 <h2> 教 学 一 览 </h2> 

3 <ul> 

本 <1li class="active"><a href="#" title="Support us" > 师资 队伍 </a></1i> 
5 <1i><a href="#" title="" > 教学 管理 </a></1i> 

6 <1i><a href="#" title="" > 课程 介绍 </a></1i> 

<1i><a href="#" title="" > 课程 安排 </a></1i> 

8. <1i><a href="#" title="" > 资深 名 师 </a></1i> 

9. <1li class="last"><a href="#" title="" > 就 业 指 导 </a></1i> 
LO </ul> 

11.</div> 


人 到 多 教学 管理 部 分 的 DIV 


教学 管理 ”部 分 采用 了 两 列 的 样式 ， 效 果 如 图 12-9 所 示 。 


图 12-9 右边 部 分 效果 图 


实现 此 部 分 的 DIV 代码 如 下 所 示 ， 其 中 ， 从 第 2~7 行 里 ， 定 义 了 右边 的 ”课程 介绍 部 
分 ， 而 在 第 8 和 第 9 行 里 ， 定 义 了 左边 的 ”教学 管理 ”部 分 。 


- <divid="sectionpanel"> 

<div id="sub-panel"> 
<h3> 课 程 介绍 </h3> 
<p style="color: #444444"> <a href="#"> 财 务 专业 </a><br /></p> 
<p style="color: #444444"> <a href="#"> 机 修 专业 </a> </p> 


i 
2 
3 
CR 
5 
6 <p style="color: #444444"> <a href="#"> 商 贸 专业 </a> </p> 
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i </div> 

> <h3> 教 学 管理 </h3> 

9. ”<p> 省 略 介绍 性 文字 </p> 
10. </div> 


i re 其 中 指定 了 靠 右 悬浮 的 样式 ， 所 以 这 里 先 
定义 ”课程 介绍 ”代码 ， 后 定义 ”课程 管理 ”代码 ， 这 部 分 的 CSS 代 码 如 下 所 示 。 


1. #sectionpanel #sub-panel { 

之 width:180px; /* 定 义 宽度 */ 

3 float :right; /* 定 义 靠 右 悬 浮 的 方式 */ 

a margin:20px 0px 0 10px; /* 定 义 外 边 距 */ 

5 border-left:1px dotted #666; /* 定 义 左边 部 分 的 边框 */ 
Ge 


课程 安排 “等 部 分 的 DIV 


在 教育 中 心 页 面 的 下 方 ， 有 ”课程 安排 、 资深 名 师 和 就 业 指 导 三 个 功能 模 
块 ， 这 些 都 采用 了 图 片 加 文字 的 样式 ， 效 果 如 图 12-10 所 示 。 


Ee 


了 
程 安排 资深 名 师 就 业 指导 

我 们 会 按照 学 生 的 学 历 ， 基 础 水 。 学 院 拥有 一 批 从 事 国内 培训 教育 的 Pe 

平 ， 以 及 所 选择 的 专业 ， 个 性 考 业 师资 力量 ,从事 教育 培训 10 。 业 指 导 ， 包 括 职 业 素质 教 

Les, 满足 不 同学 生 的 学 FP 他 们 是 学 院 高 质量 二 训 的 EE A 


图 12-10 右边 部 分 效果 图 


我 们 以 “课程 安排 “为 例 ， 讲 述 这 部 分 图片 加 文字 效果 的 样式 代码 ， 其 中 ， 在 第 3 
行 里 定义 了 图 片 ， 在 第 4 行 里 定义 了 标题 内 容 ， 而 在 第 5 行 里 定义 了 标题 下 方 的 文字 。 


1. <div class="bottompanel clear"> 

2 < 

六 <img src="img/bb.jpg" width="178" height="124" alt="" /> 
4. ”<h3><a href="#"> 课 程 安排 </a></h3> 

5 <p> 省 略 针对 课程 的 描述 </p> 

6 


</dly 
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淡雅 的 休闲 旅游 


NS 


中 第 13 章 


随 着 人 们 生活 水 平 的 不 断 提 高 ， 越 来 越 多 的 人 选择 在 节假日 或 者 空闲 时 
间 外 出 旅游 ， 从 而 达到 放松 自己 的 目的 。 为 了 满足 用 户 的 需求 ， 为 用 户 提供 旅 
游 信息 以 及 旅游 所 需 的 辅助 网 站 应 运 而 生 了 。 

休闲 旅游 类 网 站 的 相关 内 容 可 以 是 介绍 旅游 线路 、 景 点 信息 以 及 票务 
等 ， 也 有 一 些 是 旅行 社 为 了 达到 宣传 自己 的 目的 所 设立 的 站 点 。 这 些 网 站 都 多 
多 少 少 包含 有 各 类 旅游 信息 以 及 与 旅游 相关 的 内 容 。 本 章 将 具体 介绍 此 类 网 站 
的 设计 与 制作 。 


13.1 ”网 站 效果 图 分 析 


休闲 旅游 类 网 站 ， 只 是 众多 网 站 类 型 的 其 中 一 个 类 别 。 在 本 章 里 ， 将 着 重 分 析 休 闲 旅 
游 网 站 的 ”首页 和 关于 个 人 旅游 ”页面 的 设计 样式 ， 从 而 进一步 了 解 此 类 网 站 的 相关 制 
作 。 


有 首页 效果 分 析 


关于 网 站 的 首页 布局 ， 可 以 根据 图 13-1 所 示 划 分 成 4 个 部 分 。 其 中 ， 第 1 部 分 主要 包含 了 
网 站 LOGO、 网 站 导航 、 ”登录 \ 报 名 ”按钮 等 内 容 ， 第 2 部 分 主要 包含 了 网 站 BANNER 广 告 
等 ， 第 3 部 分 主要 包含 了 美食 、 美 景 、 权 威信 息 等 内 容 ， 第 4 部 分 主要 包含 了 部 分 导航 、 社 交 
平台 等 内 容 。 

在 第 2 部 分 ， 框 架 又 分 成 了 5 行 ， 分 别 添 加 了 不 同 的 内 容 。 在 第 3 部 分 ， 框 架 又 分 成 3 列 。 
其 中 ， 第 1 列 是 2 版 块 ， 可 添加 相关 的 旅游 景观 等 内 容 。 第 2 列 是 ”美食 的 诱 
惑 ” 版 块 ， 可 添加 相关 的 美食 等 内 容 。 第 3 列 是 ”权威 信息 发 布 版块， 可 添加 权威 的 旅游 
资讯 等 内 容 。 
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图 13-1 首页 效果 图 


关于 个 人 旅游 ”页 面 的 效果 分 析 


休闲 旅游 类 网 站 的 内 容 ， 为 了 达到 准确 表述 ， 许 多 地 方 会 以 图 片 的 形式 来 展示 。 如 图 
13-2 所 示 ， ”关于 个 人 旅游 ”页 面 ， 主 要 是 旅游 景点 、 线 路 等 相关 的 图 片 。 页 面 的 划分 和 首 
页 比较 相似 ， 第 一 部 分 同 首页 完全 一 样 即 网 站 的 主导 航 以 及 BANNER。 第 二 部 分 是 页 面 的 主 
体内 容 ， 主 要 介绍 有 关 个 人 旅游 的 相关 信息 。 第 三 部 分 是 组 成 页 面 底部 内 容 的 部 分 导航 。 


EE 网 站 文件 综述 


站 点 的 页 面 效果 主要 通过 图 片 、 样 式 、 脚 本 代码 等 实现 的 ， 是 经 常 使 用 的 几 种 文件 类 
型 。 其 中 的 img，css 和 scripts 三 个 目录 分 别 用 来 存放 制作 过 程 中 需 用 图 片 、css 文 件 和 JS 代 
码 ， 文 件 及 其 功能 如 表 13-1 所 示 : 


表 13-1 休闲 旅游 类 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
Index-2.html 关于 个 人 旅游 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
scripts 目 录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 javascirpt 脚 本 文件 


img 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


第 13 章 ”清新 淡雅 的 休闲 旅游 网 站 


i 


适用 线路 推荐 


图 13-2 ”关于 个 人 旅游 页面 


13.2 ”规划 首页 的 布局 


一 个 网 站 的 首页 ， 就 像 是 人 的 一 张 脸 ， 往 往 会 第 一 时 间 展 现 给 对 方 ， 所 以 做 好 首页 的 规 
划 ， 合 理 编排 布局 ， 是 网 页 制作 过 程 中 比较 重要 的 一 项 。 这 一 部 分 将 具体 介绍 JEP 网 站 的 布 


器。 


搭建 首页 页 头 部 分 


首页 页 头 部 分 主要 包括 了 网 站 LOGO、 网 站 的 导航 、 ”登录 \ 报 名 "按钮 3 块 内 容 。 具 体 
的 内 容 及 其 效果 如 图 13-3 所 示 。 
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个 人 旋 尊 。。 财 体 读 汉 


图 13-3 首页 页 头 设计 分 析 图 


关键 代码 如 下 所 示 : 

1. <div class="top menu wrapper"> 

Le 

3. <ul class="top menu inline list mvn"> 

4. <1i class="logo static"> 

5. <a href="https://" class="box logo cntr"> 

Gs <div class="sprite box logo sprite box logo glow box logo_ 
glow"> 

i <div align="center"> </div> 

8. </div> 

S <div class="sprite box logo box logo"></div> 

LO </a> 

LE </1i> 

2 <1i class="header menu link sub menu wrapper "> 

13. <a href="https: /1"><span> 关 于 </span><strong> 个 人 旅游 </ 
strong></a> 

14. <ul class="sub menu phn pbn"> 

Ds <1i class="sub menu divider"></1i> 

a <1i><a href="https://"> 适 用 线路 推荐 </a></1i> 

ES 

18. <1li class="sub menu button"> <a href="https://"> 

9 <div class="sprite 16x16 green circle arrow 
arrow"></div> 

2 <strong class="green"> 个 人 旅游 联系 咨询 </strong> 

Zs </a> 

22. 过 > 

2 </ul> 

24. A 

汉王 <1i class="header menu link sub menu wrapper "> 

26. <a href="https: //"><span> 关 于 </span> <strong> 团 体 旅游 
</strong></a> 

低 7 <ul class="sub menu phn Pbn"> 

28. <1i class="sub menu divider"></1i> 

29. <1i><a href="https://"> 适 用 线路 推荐 </a></1i> 

30. 

3 </ul> 

法 </1i> 

33- <1i class="header menu link sub menu wrapper "> 

34. <a href="https://"><span> 关 于 </span> <strong> 
签证 事务 </strong></a> 

35e 

36% SE 

Ss <li class="header menu link "><a href="https://"><span> 热 门 


线路 </span> <strong> 推 荐 </strong></a></1i> 


ie 第 13 章 清新 淡 维 的 休闲 旅游 网 站 


3368 

了 9 <li class="static header menu link header login 
signup"> 

40. <ul class="inline list multi button align align 
Pn 

41. <li class="blue button prn"> 

42. <div align="center"> 

43. <a class="left" href="https://"> 登 录 </a></div> 

44. /了 > 

45 . <li class="blue button prn"> 

46. <a Class="TLight" nrof="mhttpa://”> 披 名 <div 
class="sprite 16x16 arrow"></div></a> 

47. </1i> 

48. </ul> 

49. SA 

50. </ul> 

51. </div> 


S20 </div> 


分 析 上 述 代码 : 第 3 行 到 第 50 行 是 包含 在 一 个 ul 中 的 ， 其 中 又 包含 了 若干 个 li 将 导航 功能 
实现 。 第 4~11 行 是 一 个 i， 包 含 了 网 站 LOGO 部 分 。 第 12~38 行 又 是 一 个 li 整体 ， 包 含 了 网 站 的 
导航 菜单 。 第 39 行 到 第 49 行 分 别 是 登录 、 报名 按钮 。 以 上 几 部 分 内 容 ， 组 成 了 JEP 
网 站 的 首页 页 头 部 分 。 

另外 ， 上 述 代码 有 使 用 CSS 样 式 。 第 6 行 分 别 定义 了 class 为 ”sprite_box_logo 、 sprite_ 
box_logo_glow 、 box_logo_glow ”的 CSS， 这 个 CSS 实 现 了 网 站 LOGO 效 果 。LOGO 引 
有 图 片 ， 同 时 设置 有 相关 间距 等 属性 。 实 现 LOGO 效 果 的 主要 代码 如 下 : 


1. .sprite box logo { 
2 background: url("img/logo-A.png") no-repeat Opx 20px; width: 90px; 
height: 80px; 


3. } 
. -sprite box logo glow { 


全 background-position:10px -40px; width: ll0px; height: 80px; 

6. t 

7. .box logo glow { 

transition:350ms ease-in-out left: -1l3px; top: -1l2px; position: 


absolute; z-index: 10; opacity: 0; -webkit-transition: all 350ms ease-in-out; 
-o-transition: all 350ms ease-in-out; 
Ss } 


搭建 ”正文 部 分 ，BANNER 广 告 ”部 分 的 DIV 


BANNER 广 告 是 网 站 中 一 个 使 用 率 比 较 高 的 部 分 ， 通 过 构成 它 的 几 个 页 面 能 够 很 好 地 展 
现 企业 形象 、 行 业 信息 等 ， 最 终 达 到 宣传 效果 。JEP 网 站 中 的 BANNER 广 告 部 分 的 效果 如 图 
13-4 所 示 。 
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QDvicss mammepm #25 SLOQGQQGQGQSSG—Q—QSp 


Jep 作 为 旅游 行业 引领 各 
户 的 利益 为 第 一 要 务 ， 同 时 提 
供 权威 的 资讯 


靳 天 免 可 资讯 


图 13-4 BANNER 广告 ”部 分 的 DIV 效 果 图 


其 中 ， 主 要 的 代码 有 : 


1. <div class="light sub header sub header"> 
2. <div style="width:980px;margin:auto;position:relative;height:300px;ove 
rflow:hidden;"> 


3 <ul id="home slideshow" class="home slideshow mvn"> 

4. <1i class="panel 1"> 

5 <div class="slideshow content"> 

6. <hl class="ptl"> 和 舒适 ,便捷 的 旅行 <pr/> 现在 就 出 发 </h1> 

7 <p class="h4"> 给 自己 一 场 ， 说 走 就 走 的 旅行 <pr/> 让 生活 变 得 丰 
富 ， 怎 可 缺少 这 样 的 放松 。</p> 

8. <div class="button blue button mtl mls"> 

9. <a href="http://"> 报 名 </a> 

10 . </div> 

11. </div> 

3&- <div id="home _ overview"” class="home overview slide"> 

ER <div class="sprite 900x300"> <a 


href="http://" class="play button stop_slider sprite 128x128 
prte T2062 91o0Dal Sprites T2020 globDal play Puttony 
data-modal template="video" data-modal type="video" data-video="4kZHV]1_ 
pJ2k"></a> 

14. <div class="sprite home animation_ 
default sprite home animation default cloud slice slice 5 slice visible" 
style="right: 410px;"></div> 


15. 

16. <div class="sprite 900x300 sprite 900x300_home 
default slice 7 slice invisible" style="top:auto;"></div> 

17- </div> 

18 . </div> 

19. SL 

20. <1i class="home slide"> 

21. <div class="slideshow content"> 

2 <hl class="ptl smaller">Jep 作 为 旅游 行业 引领 者 :以 客户 的 利 
益 为 第 一 要 务 ， 同 时 提供 权威 的 资讯 </h1> 

23. <p class="h4"> 阅 读 并 且 获 取 你 所 需要 的 资讯 ， 从 而 获得 最 适合 的 
出 游 方案 。</p> 

24. 

25. </div> 

26- <div class="sprite 900x300 sprite 900x300 accelerated 


sprite 900x300 homepage forrester"></div> 
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Zs </1i> 

28. <1i class="home slide"> 

区 

305 </1i> 

3 <li class="home slide"> 

32. 

33s </1i> 

34. 

353 </ul> 

36. <div id="home slideshow controls" class="home slideshow_ 
controls"></div> 

37. </div> 


3 </div> 


上 述 代码 ， 主 要 实现 在 距 形 中 分 别 显示 5 个 不 同 页 面 内 容 。 第 2 行 定义 了 width、hight 等 范 

， 第 3-35 行 在 ul 中 分 别 用 若干 个 1 实现 不 同 页 面 的 文本 内 容 添加 。 然 后 ， 第 14-16 行 之 间 用 
若干 个 页 面 将 图 片 等 借助 CSS 代 码 实现 。 

其 中 ， 添 加 图 片 以 及 页 面 中 的 文本 及 按钮 ， 分 别 使 用 CSS 样 式 。 图 13-4 的 效果 ， 右 侧 的 

在 海边 的 图 片 也 是 用 CSS 实 现 的 。 第 13 行 定义 了 class 为 ”sprite_ 900 300 的 CSS， 主 要 的 代 


码 如 下 : 

ol .sprite 900x300 { 

2 width: 980px; height: 300px; 

加 总 } 

4 .Sprite 900x300 home { 

5 background: url("img/900x300 home-LPI6ga.png") no-repeat 
Opx Opx; 

党 } 

es .Sprite 900x300 homepage sync { 

5 background-position: Opx -980px; 

人 } 

10. .sprite 900x300 homepage box notes { 

FE background-position: Opx -340px; 

Er 

13. .sprite 900x300 homepage forrester { 

14. background-position: Opx -660px; 

Eb | 


搭建 ”美景 的 诱惑 ”部 分 的 DIV 


站 点 除了 上 述 内 容 还 搭建 有 ”美景 的 诱惑 ”部 分 的 DIV， 用 来 介绍 旅游 景点 或 者 相关 地 
方 的 景色 。 其 效果 如 图 13-5 所 示 。 
关于 这 部 分 ， 主 要 使 用 代码 如 下 所 示 : 


县 <div class="unit sizelof3 prl home box" style="position: relative;"> 

有 <a href="http://"> 

: <div class="sprite 300x90 sprite 300x90 home sprite 300x90_home 
blue"></div> 


4. “diy Class=raprite 1]20xL20° sprite 120x120 global sprite F20239 
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global collab _ folder home box icon"></div> 


Si </a> 
6. <h3 class="mt1 ptm blue"><a href="http://"> 美 景 的 诱惑 </a></h3> 
本 <p> 去 旅游 ， 怎 么 可 以 少 了 美景 呢 ? 即使 再 累 ， 有 着 旅途 中 的 美景 ， 可 以 减少 心中 的 那 一 


份 负 累 。 这 也 是 越 来 越 多 人 喜欢 背包 ， 喜 欢 旅游 的 那 一 份 魂 棕 梦 绕 。 网 站 提供 了 不 同 的 资源 ， 以 便于 获得 
最 佳 的 旅游 体验 。 此 外 ， 也 不 失 为 一 种 享受 ! <a href="http://"> 浏 览 更 多 </a></p> 


8. </div> 


美景 的 诱惑 


去 旅游 ， 怎 么 可 以 少 了 美景 呢 ? 即使 再 累 ， 有 着 旅途 
中 的 美景 ， 可 以 减少 心中 的 那 一 份 负 昧 。 这 也 是 越 来 
赴 多 人 喜欢 背包 ， 喜 欢 旅游 的 那 一 份 瑰 牵 梦 绕 。 网 站 
提供 了 不 同 的 资源 ， 以 便于 获得 最 佳 的 旅游 体验 。 此 
外 ， 也 不 失 为 一 种 享受 ! 浏览 更 多 


图 13-5 ”美景 的 诱惑 ”部 分 DIV 的 效果 图 


分 析 其 相关 作用 ， 第 6 行 中 美景 的 诱惑 ”这 一 组 文字 添加 了 链接 效果 。 同 样 ， 第 7 行 的 
浏览 更 多 也 添加 有 链接 。 
上 述 效 果 中 ， 同 样 使 用 了 CSS 样 式 。 第 3 行 定义 有 class 为 sprite_300 90 的 CSS， 代 码 内 容 
如 下 ; 


Ee .Sprite 300x90 { 

2 width: 310px; height: 90px; 

< 人 } 

4. .sprite 300x90 home { 

加 background-image: url("img/300x90 home-DrryRT.png"); 
| 

7. .sprite 300x90 home green { 

上 background-position: -310px Opx; 
| 

10. .sprite 300x90 home grey { 

Ls background-position: -617px Opx; 
过 下 


其 中 ， 第 1~3 行 代码 设置 了 长 和 宽 。 第 4~12 行 的 代码 效果 就 是 图 13-5 中 美景 的 诱惑 上 
方 出 现 的 图 片 效 果 。 


搭建 ”权威 信息 发 布 ， 部 分 的 DIV 
关于 ”权威 信息 发 布 “这 一 部 分 的 DIV 效果 与 ”美景 的 诱惑 ”比较 相似 ， 其 不 同 之 处 在 
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于 上 方 的 灰色 框框 内 显示 有 不 同 国家 的 旅游 信息 。 在 ”权威 信息 发 布 文字 的 下 方 显 示 有 相 
关 的 文本 内 容 ， 如 图 13-6 所 示 。 


埃及 之 旅 : 那里 有 着 古老 的 传 讽 ， 独身 人 
参加 热门 线路 


权威 信息 发 布 


Jep 提 供 不 同 旅游 资讯 最 新 的 ， 最 实惠 的 旅游 线路 ， 
期 待 你 的 探索 与 加 入 。 立即 加 入 网 站 的 相关 线路 ， 在 
合理 的 范围 内 ， 做 到 最 实惠 的 价格 > 


13-6 ”权威 信息 发 布 ”部 分 DIV 的 效果 图 


主要 用 到 以 下 DIV 代码 : 


1.<div class="unit sizelof3 pll last home column"> 

2.<div class="sprite 300x90 sprite 300x90 home sprite 300x90 home grey 
press_wrapper"> 

3. <ul id="press home slideshow" class="press home slideshow mvn pts"> 


4. <1li class="media"> 
三 <div class="img ext sprite 48x48 box world tour mtm mls 
人 


<p class="bd phm plm"> <strong> 埃 及 之 旅 :</strong> 那里 有 着 古 
老 的 传说 ， 狮 身 人 。。。<br><a href="http://"” target=" blank"> 参 加 热门 线路 </a> 


We </p> 

8. </1i> 

9 <li class="media"> 

让 0 

Eh 过 /> 

2 <li class="media"> 

JS 

14. EXT 

LSe ‘</ul> 

16.</div> 

Ei 售 <h3 class="mtl] ptm blue"><a href="http://"> 权 威信 息 发 布 </ 
a></h3> 

18. <p> <a href="http://">Jep 提 供 不 同 旅游 资讯 </a> 最 新 的 ， 最 实惠 的 旅游 线 


路 ， 期 待 你 的 探索 与 加 入 。 <a href="http://"> 立 即 加 入 </a> 网 站 的 相关 线路 ， 在 合理 的 范围 内 ， 
做 到 最 实惠 的 价格 。 

ED 

20.</div> 


关键 代码 的 含义 : 
其 中 ， 第 3~15 行 是 一 个 ul 中 分 别 用 若干 个 li 实现 不 同文 本 内 容 的 添加 与 显示 ， 这 与 之 前 
美景 的 诱惑 ”比较 相似 。 人 第 2 行 和 第 16 行 的 这 样 一 个 嵌 套 ， 便 
于 实现 更 多 的 CSS 样 式 。 从 而 实现 了 在 文本 中 的 灰色 阴影 的 效果 。 
第 17 行 用 <h3> </h3> 标 签 来 实现 权威 信息 发 布 这 一 标题 文本 的 建立 。 第 18 行 、19 
行 用 <p> ”</p> 标 签 实 现 了 文本 的 加 入 ， 其 中 用 <a href="http://"> ”</a> 标 签 的 设置 ， 实 现 文 
本 的 突出 效果 ， 并 在 其 中 设置 了 文本 链接 。 
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搭建 ”查看 相关 反馈 “部 分 的 DIV 


这 里 将 介绍 的 ”查看 相关 反馈 。 是 页 脚 上 方 的 一 部 分 ， 显 示 有 不 同 网 站 、 品 牌 等 的 
LOGO、 网 址 等 内 容 。 具 体 如 图 13-7 所 示 。 


查看 相关 反馈 
超过 1000,000 的 人 体验 了 Jep 的 服务 


下 oercn CTS ZG Rs 9 Yi Dior 


图 13-7 ”查看 相关 反馈 “等 部 分 的 效果 


关于 此 部 分 的 DIV 代 码 ， 主 要 用 到 如 下 内 容 : 


1.<div class="line border btm dotted" style="clear:both;"> 
2.<p class="unit sizelof2 mvn"> 


EF 超过 <strong>1000,000 的 人 </strong> 体验 了 Jep 的 服务 . 
4.</p> 

3 <p class="txt r last unit sizelof2"> 

6 <a href="http://" target=" blank"> 查 看 相关 反馈 </a> 

Te </p> 

8.</div> 


9.<a href="http://" target=" blank"><divy class="sprite customer 10go 
strip"></div></a> 

关键 代码 定义 的 含义 : 

DIV 主要 包括 两 部 分 内 容 ， 第 1-8 行 实现 了 图 13-7 中 上 半 部 分 的 文本 内 容 的 制作 。 第 9 行 
DIV 的 存在 ， 主 要 是 用 来 添加 其 中 的 LOGO 图 片 的， 定义 有 class 为 sprite_customer_logo_strip 的 
CSS， 具 体 代码 如 下 : 


1..sprite customer logo strip { /* 定 义 字 段 */ 

2.background: url("img/customer logo.png") no-repeat Opx Opx; 
/* 添 加 背景 图 片 */ 

3. width: 980px; /* 定 义 宽度 */ 

4. height: 50px; /* 定 义 高 度 */ 

局 小 


搭建 首页 页 脚 部 分 的 DIV 


首页 的 页 脚 主 要 起 到 辅助 作用 ， 所 以 功能 设计 上 一 般 不 会 太 复杂 。JEP 网 站 中 
放置 有 菜单 导航 、 社 交 平 台 的 链接 等 内 容 。 具 体 效果 如 图 13-8 所 示 。 


主要 在 此 


才 所 以 作 并 和 医生 拉 广 


关子 我们 ， 负 境 原址 ， 公 必 可 网 。 绪 护 去 持 ， 访 可 RM 


图 13-8 页 脚 部 分 的 DIV 
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主要 代码 如 下 : 


Fi <div class="footer wrapper footer big" style="margin-top: -183px;"> 

2 <div class="module module footer pvl" data-module="legacy-— 
footer"> 

<div class="line pbl"> 

4. <div class="unit size3of4"> 

5 <div class="line"> 

6. <div class="unit sizelof5 prm"> 

7 <ul class="basic list sm"> 

8. <li><a class="light grey"” href="https://"><strong> 个 人 旅行 </strong></ 
a></1li> 


也 <1li><a class="light grey" href="https://"> 快 速 报名 参加 </a></1i> 
10. <li><a class="light grey"” href="https://"> 网 络 资讯 提供 </a></1i> 
11. <li><a class="light grey" href="https://"> 线 路 报价 参考 </a></1i> 


L222 </ul> 

3 </div> 

14. <div class="unit sizelof5 phm"> 

了 5 <ul class="basic list sm"> 

16.<li><a class="light grey" href="https://"><strong> 团 体 旅 行 </strong></ 
a></1i> 

ET 

下 和 > </ul> 

下 9 </div> 

207 <div class="unit sizelof5 phm"> 

2 <ul class="basic list sm"> 

和 22 

23. </ul> 

24. </div> 

党 与 二 <div class="unit sizelof5 plm"> 

2 

者 全 </div> 

2 </div> 

二 局 </div> 

30. <div class="unit sizelof4"> 

号 <ul class="inline list social links social links_ 
big"> 

< pd <1i> 

< 七 如 <a href="https://"> 

34. <div class="social icon sprite 24x24 
sprite 24x24 grey rss mha mbs display block"></div> 

5 <div class="light grey legal txt c display_ 
blockn> 腾 讯 co</div> 

和 5: </a> 

= </1i> 

8 <Ii> 

99 <a href="https://"> 

40. <div class="social icon sprite 24x24 sprite 24x24_ 
grey_youtube mha mbs display block"></div> 

ls <div class="light grey legal txt c display_ 


block"> 新 浪 微 博 </div> 
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2 </a> 
43. </1i> 


45. </ul> 

46. </div> 

47. </div> 

48. <hr class="breadcrumbs divider h divider thin mvn" /> 

49. <ul class="inline list ext legal ptl mha txt c single line"> 
50. < Ti 

Els <1i><a href="https://"> 关 于 我 们 </a></1i> 


8 </ul> 

54. </div> 

55- </div> 

关于 页 脚 可 以 分 成 三 步 来 实现 。 

步骤 1: 上 方 左 侧 导航 的 实现 。 第 6~28 行 ， 实 现 的 就 是 该 导航 效果 。 这 是 一 组 导航 菜 
单 ， 实 现 比 较 简 单 。 

步骤 2: 上 方 右 侧 社交 平台 的 链接 实现 。 第 30~47 行 ， 实 现 的 就 是 这 一 部 分 的 效果 。 其 中 
的 腾讯 QQ 、 新 浪 微 博 、 微 信 同样 使 用 CSS。 第 34 行 定义 有 class 为 sprite_24 24 
的 CSS， 具 体 代 码 如 下 : 

1. .sprite 24x24 { /* 定 义 字段 */ 

2 background: url("img/24A.png") no-repeat Opx Opx; width: 24px; 
height: 24px; 

/* 定 义 宽度 、 高 度 ， 添 加 图 片 */ 

3 

步骤 3， 下 方 中 间 导航 的 实现 。 第 49~53 行 的 ul 中 ， 实 现 的 就 是 这 一 组 导航 ， 方 法 同样 也 
是 比较 简单 的 。 


《EN 首页 CSS 效 果 分 析 


网 站 的 页 面 效 果 除 了 借助 DIV 搭建 一 个 好 的 架子 之 外 ， 更 是 离 不 开 CSS 代 码 在 其 中 所 起 的 ” 锦 
上 添 花 ”作用 。JEP 网 站 的 首页 ， 其 中 所 使 用 的 CSS 代 码 ， 及 其 实现 的 效果 ， 具 体 如 表 13-2 所 示 。 


表 13-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


jm 
L..9 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<li class="blue_button | 添加 按钮 框架 蓝 色 背景 : 
prn"> .blue_button{ 


<div align="center"><a| border: 1px solid rgb(43, 125, 185); box-shadow: inset Opx 3px Opx 


class=" left"|-2px rgba(255,255,255,0.3), Opx 2px Opx rgba(15,106,177,1), 0.6px 
href="https://"> 登 录 |3px 4px rgba(0,0,0,0.4); text-shadow: 0px -1px 0px #666; background- 


</a></div> image: linear-gradient(to top, rgb(37, 125, 194) 0%, rgb(87, 171, 232) 
</li> 94%); -webkit-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, .3), 
0 2px 0 rgba(15, 106, 177, 1), 0.6px 3px 4px rgba(0, 0, 0, .4); 
} 


一 第 13 章 “清新 淡 只 的 休闲 旅游 网 站 


( 续 表 ) 

DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<li class="blue_button | 在 按钮 上 添加 向 右 图 标 : 
prn"> .sprite_16x16 { 
< Class=" right” background: url("img/16A.png") no-repeat Opx Opx; 
href="https://"> width: 16px; height: 16px:; 
报 名 <div class=|} 
"sprite_16x16 arrow"> | 设置 图 标 效果 : 报名 9 
</div></a> .arrow { 
</li> margin-bottom: 1px; margin-left: 4px; display: inline- 

block; 

} 
<div class="button | 按钮 效果 : 
blue_button mtl mls"> |.button { 


<a href="http://"> 获 得 
免费 资讯 </a> 

</div> 

<div class="sprite_ 
300x90 sprite_300x90_ 
home sprite_300x90_ 


home_blue"></div> 


<h3 class="mtl ptm 
blue"><a href= 
"http://"> 美 食 的 诱惑 


</a></h3> 


13.3 


在 关于 个 人 旅游 


padding: 7px 27px; color: rgb(255, 255, 255); font-size: 
16px; font-weight: bold; display: inline-block; cursor: pointer; 
} 
导航 图 片 及 灰色 背景 组 合 : 
.sprite_300x90 { 

width: 310px; height: 90px; 


， 
.sprite_300x90_home { 

background-image: url("img/300x90_home-DrryRT. 
png"); 
} 
设置 标题 行 : 
.ptm { 

padding-top: 10px !important; 


“关于 个 人 旅游 ”介绍 


二 级 页 面 ， 主 要 包括 


外 跟 团 旅游 、 国 


内 自助 游 、 国外 自助 游 、 个 人 旅游 联系 咨询 


于 这 些 栏 目的 重要 DIV 的 设计 方式 ， 是 本 节 内 容 的 重点 。 


适用 线路 推荐 、 国内 跟 团 旅游 、 


获得 免费 资讯 


下 


美食 的 诱惑 


页 面 


国 
几 部 分 内 容 。 关 
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适用 线路 推荐 “部 分 的 DIV 


适用 线路 推荐 ”主要 以 图 片 加 文字 说 明 的 样式 实现 的 。 

上 方 是 旅游 景点 的 相关 图 片 ， 下 方 是 相关 的 文本 内 容 。 具 体 效果 
如 图 13-9 所 示 。 
一 个 休闲 旅游 类 网 站 ， 其 页 面 内 容 以 休闲 旅游 类 的 相关 信 
息 为 主 。 出 于 网 站 布局 实现 过 程 中 会 涉及 很 多 图 片 ， 这 里 的 适 
线路 推荐 ”采用 了 文本 形式 。 这 部 分 主要 用 ul 和 1i 的 方式 来 定 
义 旅游 线路 。 主 要 代码 有 : 

1. <hl><a href="https://"> 适 用 线路 推荐 </a></h1l>/* 定 
义 标题 栏 */ 

2. <div id="layout"> 

3 oS 

4. <li><a href="#"><img src="img/11.jpg" 
width="72" height="66"/> 北 京 天 安 门 </a></1i> 

Se <li><a href="#"><img src="img/12.jpg" 
width="72" height="66" /> 游艇 之 旅 </a></1i> 


6. <li><a href="#"><img src="img/13.jpg" 
width="72" height="66" /> 桂林 山水 </a></1i> 

y <li><a href="#"><img src="img/14.jpg" 
width="72" height="66" /> 澳大利亚 </a></1i> 

8 <li><a href="#"><img src="img/15.jpg" 


width="72" height="66" /> 浪漫 巴黎 </a></1i> 


加 
南 三 亚 </a></1i> 


适用 线路 推荐 


六 站) 


图 13-9 ”适用 线路 推 
大 部 分 的 效果 图 


<li><a href="#"><img src="img/16.jpg"” width="72" height="66" /> 海 


LOR <li><a href="#"><img src="img/17.jpg" width="72" height="66" /> 悉尼 


歌剧 院 </a></1i> 


11. <li><a href="#"><img src="img/18.jpg"” width="72" height="66" /> 拉萨 </ 


a></1i> 
A </ul> 
13: </div> 


个 人 旅游 联系 咨询 ”部 分 的 DIV 


这 里 可 以 分 成 三 部 分 ， 个 人 旅游 联系 咨询 ”是 一 部 分 ， 
提交 按钮。 效果 如 图 13-10 所 示 。 


图 13-10 实现 的 效果 图 


文本 框 ” 是 一 部 分 ， 然 后 是 


il 第 13 齐 清新 淡 维 的 休闲 旅游 网 站 


hs 
2 
如 


主要 使 用 如 下 代码 实现 : 


<h2> 个 人 旅游 联系 咨询 </h2> 
<textarea rows="2"> 请 在 这 里 输入 提交 内 容 ! </textarea> 
<input name=" 提 交 " type="submit" value=" 提 交 " /> 


对 应 具体 功能 ， 第 1 行为 标题 行 ， 第 2 行 是 添加 的 ”文本 框 ， 第 3 行 是 提交 按钮 。 
为 了 不 因为 图 片 的 添加 ， 影 响 网 站 的 可 读 性 及 其 优化 效果 ， 这 里 的 ”个 人 旅游 联系 咨询 在 
考虑 到 设计 效果 添加 背景 的 前 提 下 ， 同 样 将 该 背景 内 容 以 不 添加 背景 图 片 的 方式 来 实现 。 其 
中 标题 行 的 灰色 背景 区 域 使 用 有 如 下 CSS 样 式 。 


b 
2 
3 
4. 
5 
有 


} 


. -middleleft h2 { 


height: 30px; 

width: 350px; 
background-color: #EEE; 
float: left; 


国内 跟 团 旅游 ”等 部 分 DIV 


在 页 面 的 右 方 ， 有 ”国内 跟 团 旅 游 、 国外 跟 团 旅游 、 国内 自助 游 和 ”国外 自 


助 游 4 个 功能 模块 ， 如 图 13-11 所 示 ， 这 些 都 是 采用 图 片 加 文字 部 分 的 样式 实现 。 
上 述 4 个 功能 模块 除了 文本 内 容 有 略微 不 同 ， 其 布局 及 样式 都 是 相同 的 ， 可 使 用 Table 来 


实现 。 以 ”国内 跟 团 旅游 为 例 ， 是 一 个 2 行 4 列 的 表格 。 其 中 ， 标 题 用 <h2> 标 签 。 主 要 编码 


如 下 : 


LE 


<h2><strong> 国 内 <span class= h2 > 跟 团 旅游 </span></strong></h2> 
<table frame= void width= 860 border= 1 > 
<tr> 
<td height= 150 class= tl ></td> 


<td height= 150 class= t4 ></td> 
</tr> 
ER 
<td> 北 京 5 日 游 2000 元 <h7 class= Ll > 更 多 线路 </h7></td> 


<td> 蒙 古 6 日 游 ”2200 元 <h7 class= Ll > 更 多 线路 </h7></td> 
SE 
</table> 
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国内 跟 团 旅游 


陛 京 5 日 落 2000 元 线路 | 团员 [云南 2 日 匡 1200 元 更 多 线路 | 蒙古 6 日 蓝 2200 元 


国外 跟 团 旅游 


欧洲 5 日 游 5200 元 


国内 自助 游 


本 


国外 自助 游 


承 二 去 二 要 天 去 三 亚 更 多 线 各 | 隐 天 去 草原 更 多 线 中 | 


i 


去 英国 


间 学 更 少时 路 | 去 非 放 而 林 EE 


玖 


13-11 效果 图 


其 中 ， 第 1 行 实现 了 国内 跟 团 旅游 ”文本 的 标题 效果 。 第 2~13 行 就 是 整个 表格 区 域 ， 第 


3~7 行 表格 添加 


CSS 样 式 实现 。 
Te 
2 


图 片 内 容 ， 第 8~12 行 表格 添加 图 片 下 方 的 文本 内 容 。 图 片 的 添加 ， 用 下 面 的 


background-image: url (img/pl.jpg); 


电脑 商城 网 站 第 14 


数码 商品 购物 网 站 为 了 吸引 人 气 ， 需 要 为 用 户 提供 一 个 愉悦 的 购物 体 
验 ， 所 以 网 站 的 页 面 设计 不 仅 要 布局 简捷 ， 还 要 使 用 一 些 动态 的 效果 来 吸引 
访问 者 的 眼球 。 

本 章 我 们 将 分 析 一 个 电脑 商城 网 站 的 实现 方式 ， 这 个 网 站 主要 包括 首 
页 、“ 人 台式 机 ”和 “服务 器 ”三 个 页 面 ， 由 于 篇 幅 的 关系 ， 本 章 将 只 详细 分 
析 前 两 个 页 面 。 


14.1 ”网 站 页 面 效果 分 析 


的 位 置 放置 商品 的 描述 信息 和 评论 信息 。 


于 是 购物 网 站 ， 所 以 不 仅 需要 用 大 篇 幅 的 商品 图 片 来 吸引 访问 者 ， 而 且 还 需要 在 醒 


本 章 将 着 重 分 析 首 页 和 ”台式 机 页 面 ”的 设计 样式 ， 而 ”服务 器 ”页面 的 风格 与 前 两 个 


页 面 非常 相似 ， 本 章 就 不 再 分 析 ， 这 个 页 面 的 代码 请 大 家 自行 从 与 本 书 配套 的 
取 。 


人 ER 首页 效果 分 析 


下 载 资源 中 获 


电脑 商城 网 站 的 首页 效果 如 图 14-1 所 示 ， 它 是 一 个 三 行 的 布局 样式 ， 在 第 一 行 里 ， 放 置 


了 网 站 的 Logo 图 片 和 站 点 导航 信息 ， 在 第 二 行 里 ， 分 别 用 三 行 来 表示 ”网 站 导航 、 网 站 


正文 和 有 关 商 家 元素; 而 在 最 后 一 行 里 ， 放 置 网 站 页 脚 部 分 的 导航 信息 。 


在 第 二 行 框架 里 ， 包 含 了 电脑 商城 网 站 的 主体 部 分 ， 这 部 分 其 实 也 是 个 三 
一 行 包 括 网 站 导航 模块 和 搜索 模块 ， 第 二 行 包括 ”最近 行情 、 最 新 商品 
第 三 行 则 是 网 站 合作 商家 模块 。 


行 的 效果 ， 第 
两 部 分 内 容 ， 
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服务 器 


二 3 平台 主板 技 喜 720-ES3 舍 价 469 元 ( 


wre Ta 二 闪失 册 iD 下 各 宇 要 过 各 70 3 ， 这 帮主 
Dm 


Cb ey 
ee 
24 寸 高 分 关 IPS 亚 示 癌 惠普 ZK248 报 3800t95) 


re 


EE 


gr i 
CT TT 
影响 6T240 黑 将 碑 X5 仅 799:1m5 1 


tt. 


Mo EE HA, Mm, rsa mr 
和 


联想 ThinkPad oti 新曲 人 Ta99rn 
eT rte a 
人 全， 本 条 听 ， 二 大 间 用 说 于 
轻 兽 低压 本 华 俩 UL30A 景 了 500185 1 
大 二 的 寺 忆 内 ， 导 科 之 可 全 和信 直 的 信 ， 轩 和 大 三 疝 人 和 让， 四 直人 
上 


i 


a ee ee SR, 


ELLIL ELLLLLLLE 


图 14-1 首页 的 效果 图 


电脑 配件 


声 配 件 吧 天 个 


有 RS 和 14 训 电脑 商城 网站 


中间 本 和 台式 机 页 面 的 效果 分 析 


台式 机 页 面 大 致 上 也 采用 了 三 行 的 样式 ， 第 一 行 、 第 三 行 的 样式 与 首页 相同 。 在 第 二 行 
里 ， 包 含 了 两 个 大 列 ， 第 一 列 容纳 了 导购 分 类 、 ”业内 动态 和 ”联系 客服 三 大 块 内 
容 ， 而 第 二 列 则 是 由 ”推荐 商品 和 ”新品 推 荐 ”组 成 的 。 人 台式 机 页 面 效果 如 图 14-2 所 示 。 

推荐 商品 是 本 网 站 的 一 大 特色 ， 所 以 在 这 个 页 面 中 ， 将 用 JS 和 CSS 实 现 动态 显示 推 
荐 的 商品 这 个 效果 。 


首页 注册 登入 帮助 WW iF 0 


全 面 摸 机 网 


电脑 配件 一 正 侦 全 万 有 尽 有 


台式 机 笔记 本 服务 器 电脑 配件 


品 泪 机， 兼容 机 首选 品牌 品质 保证 质量 上 楷 到 务 优先 配件 绝 无 假 货 


| | Sw 分 类 
| | Btn 
家 用 台式 机 
商用 台式 机 匡 尔 Studio XPS 6000( S210280CH) 
游戏 台式 机 
一 传 机 
行业 台式 机 


洲 业 内 动态 

F 09.16 - 品牌 服务 器 全 线 降 价 详 
2010.03. 12 - IDF2010; 小 巧 的 台式 机 
将 成 为 未 来 主流 详细 


2010. 03. 10 - 同方 S7650 双 核 独 显 实用 
娱乐 电脑 仅 售 3700 详细 


2010.03.09 - 为 喻 全 球 最 和 联想 N3 一 
体 机 拆 机 解析 详细 


| 
ok 
有 通 到 什么 困难 吗 ? 


如 果 有 过 到 | 难题 ， 可 以 联系 我 们 的 联想 Ia， 20e《 奸 行 TG 网 过 版 》 
客服 


联系 方式 : 
Pr 
:021-12345678 
(上 年 9:00~ 下 年 47:00) be 就 220* 挡 薄 堪 式 《T220115CE) 6 


169 


QQ、|DIV+CSS 网 站 布 局 案例 精 秩 (第 2 版 ) 


170 


[| i 
新 品 推荐 


4 亚 和 二 自 


硬 全 面 手机 网 

电脑 柜 件 一 应 个 全 应 月 尽 有 

JN DELL( 仙 尔 )】 到 0 哮 莹 】 lenove 呢 轨 ) 浪 戎 15WE 伴 砚 ) Su Oxygen 3 级 】 Fender 手 正 TigerFover 清华 同方 nlw( 革 村) Grewt Wall 
【长城 】 Darnine( 曙光 ) FoverLeader( 宇 奢 ) 


ee 
时 及 也 件 一 应 俱全 应有尽有 | 


全 用 % 壬 新 闻 
关于 我 们 


全 面 污 机 网 | 保留 一 切 版 权 


oO 


图 14-2 台式 机 页 面 的 效果 图 


人 SEE 网 站 文件 综述 


在 这 个 网 站 里 ， 除 了 上 文 里 提 到 的 首页 和 活动 展示 页 面 外 ， 还 需要 包含 ”服务 器 页 
面 ， 而 这 些 页 面 中 所 用 到 图 片 、CSS 文 件 和 JS 代码 ， 将 分 别 放置 在 img、css 和 js 目录 里 ， 文 件 
及 其 功能 如 表 14-1 所 示 。 


表 14-1 电脑 商城 网 站 文件 和 目录 一 览 表 


Shop-Design.html 台式 机 页 面 
Shop-Service.html 服务 器 页 面 

css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 

js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 

img 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


第 14 章 ”电脑 商城 网 站 


14.2 ”规划 首页 的 布局 


在 上 一 节 中 ， 我 们 已 经 介绍 了 首页 的 组 成 ， 本 节 我 们 直接 进入 到 设计 步骤 ， 设 计 的 时 候 
还 是 按照 老 规 矩 ; 先 用 DIV 构建 总 体 框架 ， 随 后 再 细 分 ， 最 后 用 CSS 和 JS 实现 动态 的 效果 。 


搭建 首页 页 头 的 DIV 


首页 页 头 由 页 头 小 图 片 、 导 航 信息 和 购物 车 三 部 分 组 成 ， 首 页 页 头 显示 效果 如 图 14-3 
所 示 。 


图 14-3 首页 页 头 的 DIV 设计 分 析 图 


实现 页 头 部 分 的 关键 代码 如 下 所 示 。 


1. <dqiv id="pageBorderTop"> 


和 <img src="img/star.gif" id="star" alt="" /> 

Se <a href="#"><img src="img/spacer.gif" alt="" style="width:240px; 
height:90px; position:absolute; margin:30px 0 020px; z-index:2000;" /></a> 

4. <div id="quickLinks"> 

Ss <ul> 

6. <1i><a href="index.html"> 首 页 </a></1i> 

7 <1i><a href="#"> 注 册 </a></1i> 

de <1i><a href="#"><strong> 登 和 </strong></a></1i> 


9. <1i><a href="#"> 帮 助 </a></1i> 

网 </ul> 

I </div> 

ear <div id="cartLink"><img src="img/cart .gif" alt="0" /> <a href="#" > 购物 车 
<strong> (0)</strong></a></div> 

Ee 


在 上 述 代码 的 第 2 行 、 第 3 行 中 ， 放 置 一 个 简单 的 DIV， 真 正 的 页 头 是 从 第 4 行 开始 定义 。 
从 第 4~11 行 ， 定 义 了 导航 工具 条 ， 包 括 首 页 、 注册 和 登录 等 字样 。 在 第 12 行 
里 ， 定 义 了 购物 车 。 


搭建 首页 主体 部 分 的 DIV 
按照 前 文 的 思路 ， 我 们 还 是 使 用 DIV 的 方式 构建 首页 及 主体 部 分 的 DIV， 主 体 部 分 的 DIV 包 
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含 了 3 个 部 分 ， 其 中 第 一 个 部 分 由 网 站 Logo、 网 站 导航 和 网 站 搜索 组 成 ， 效 果 如 


网 


14-4 所 示 。 


笔记 本 服务 器 电脑 配件 


品 栖 机 ， 兼 雁 机 。。 首先 品牌 品质 保证 “质量 上 业 服务 优先 ”正版 配件 绝 无 假 货 


14-4 主体 部 分 第 一 行 DIV 效 果 


四 
网 


主体 部 分 第 一 部 分 关键 代码 如 下 所 示 。 


Uedavw> 

2. <divid="topNavi"> 

3 <ul id="kwicks"> 

4 <li><a class="kwickmodule" href="Shop-Design.html"><span> 台 式 机 <br /> 
5 品牌 机 ， 兼 容 机 </span></a></1Ii> 

6. 

了 </ul> 

8. </div> 

9. <div id="breadCrumb"><ahref="#" class="headerNavigation"> 首 &gt;&gt;</a> 
10. <divid="searchContainer"> 

11. <divclass="sd">Seite durchsuchen</div> 


12. <input type="text" name="keywords" id="txtSearch" style="color:#999999" 
onkeyup="searchSuggest () ;" value=" 输 入 查找 内 容 " /> 

DE <div id="search suggest"></div> 

14. <input type="image" src="img/searchContainerButton.png" alt=" 搜 索 " 
title=" 搜索 "id="go" /> 

9s </div> 

16. </div> 


17. </div> 


在 上 述 代 码 中 ， 第 2~8 行 定义 了 网 站 的 导航 
部 分 ; 第 9~16 行 定义 了 网 站 页 面 导 航 和 网 站 搜索 
部 分 ， 其 中 第 10 行 的 ID 定义 一 个 背景 图 片 ， 这 
个 背景 图 片 和 搜索 栏 结合 ， 所 以 出 现 了 如 图 14-4 
所 示 的 一 个 与 众 不 同 的 搜索 栏 。 
主体 部 分 的 第 二 行 主要 分 为 两 列 ， 第 一 列 
是 业内 最 新 信息 ， 第 二 列 是 最 新 商品 ， 而 这 两 


列 都 分 为 上 下 两 个 部 分 ， 下 面 我 们 就 来 一 一 分 
析 。 
ee 首先 介 绍 的 是 第 一 行 第 一 列 的 在 部 分 ? 效 
ee | 果 如 图 14-5 所 示 。 
影驰 GT240 黑 将 版 R5 仅 799![ 坦 看 1 上 图 中 ， 每 个 商家 的 最 新 报价 都 是 由 个 
图 14-5 第 二 行 第 一 列 上 部 分 DIV 效果 图 DIV 组 成 的 ， 这 部 分 代码 没有 什么 特点 ， 我 们 
就 不 再 详细 分 析 了， 其 代码 如 下 所 示 。 


2 


1. <ahref="#"><img src="img/indexModule.png" alt="" /></a> 

2. <div> 

3 <h4>AM3 平 台 主板 技嘉 M720-ES3 售 价 469 元 

4 <span style="font-size:12px;"><a href="#"> [查看 ]</a></span></h4> 
<p>snbsp;snbsp;&gnbsp;sgnbsp; 技 嘉 为 我 们 带 来 一 </p> 

6 </div> 

7 

8. </div> 


第 一 列 下 部 分 和 上 部 分 是 一 样 的 ， 只 是 改 了 字体 颜色 而 已 ， 其 效果 如 图 14-6 所 示 。 

于 下 部 分 DIV 和 上 部 分 DIV 的 效果 是 相同 的 ， 这 里 代码 就 不 给 出 了 ， 如 有 需要 可 自行 
从 与 本 书 配套 的 下 载 资源 中 获取 。 

第 二 列 搭建 的 是 ”商品 快讯 和 电脑 设备 /组 网 设备 ”两 个 部 分 ， 这 两 个 部 分 的 布局 是 
一 样 的 ， 所 以 下 面 就 只 介绍 一 个 ”商品 快讯 ”部 分 ， 其 效果 如 图 14-7 所 示 。 


联想 06455A-N520 00) 
特价 3900. 00 元 


者 和 如 困 


两 昌 值 32068 移 动 硬 盘 接 荐 


据 了 解 ， 此 次 AID 与 七 喜 电脑 的 手 举办 的 广东 地 区 产品 过 展 活动 格 持 持 整 个 三 月 ， 四 
市 区 、 佛 山南 海 、 杰 莞 虎门 、 厂 州 花 都 、 江 门 新 会 i ee 化 庆 等 6 个 地 区 核心 电脑 城 ， 

光 内 所 和 要 训 本 活动 攀 辐射 各 大 重要 周 这 区 ; 和 
在 内 的 众多 图 负 消 : ~ 成功 人士 


Coww100 成 功 进 芋 中 国 开启 国内 客 星 新 时 代 


由 


器 著 43215 (WF413PA) 
现价 5080. 00 元 


Cona100， 全 球 令 先 的 客户 服务 软件 供应 商 ， 宣布 本 周正 式 进入 中 国 市 场 ， 免 费 为 国内 的 中 小 企业 提 
供 高 品质 的 客户 服务 软件 和 本 地 化 的 技术 支持 ， 帮 助 企业 创造 和 留 作 。2009 年 6 月 发 布 以 来 ， 在 拓 蚂 
的 几 个 月 内 ， 已 有 20, 000 家 企业 注册 使 用 软件 - 可 过 免 于 


CT 


齐 
| 
虽 


14-6 第 二 行 第 一 列 下 部 分 DIV 效果 图 


14-7 第 二 行 第 二 列 上 部 分 DIV 效果 


上 图 中 每 个 商品 都 是 由 一 个 DIV 组 成 的 ， 并 用 虚线 分 隔 开 来 ， 其 代码 如 下 所 示 。 


1. <div style="width:296px; float:right;"> 
2 <div class="alignRight" style="text-align:center;background- 
Color:#F2F2F2;color:#A83600"> 


<h4> 商 品 快讯 </h4></div> 


4. <1==itle==> 

5-。 <div class="newProductsDefault"> 

6 <div class="shows"><img src="img/pc/001.bmp" /></ 
div> 

站 扣 <div class="content"> 

8 <a href="#" class="productLink"> 联 想 G455A- 
M320 (H) </a><br /> 

9. 特价 <strong>3900.00 元 </strong><br /> 
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To <de1> 原 价 4199.00 元 </del><br /> 
le <a href="#"><small> 查 看 详细 </small></a> 

2 </div> 

3< </div> 


LS oe 

16. </div> 

在 上 述 代 码 中 ， 第 5~12 行 就 是 一 个 商品 展示 ， 这 里 要 注意 的 是 第 5 行 引 用 了 ID 为 
newProductsDefault 的 CSS， 它 定义 了 一 个 背景 图 片 ， 这 个 背景 图 片 是 虚线 。 

第 三 部 分 是 网 站 的 一 些 合作 商家 ， 它 由 一 个 简单 的 DIV 组 成 的 ， 其 效果 如 图 14-8 所 示 。 


区 全 面 加 机 网 
电脑 配件 一 碧 俱全 本 有 尽 有 


I DEL 吉凶) len 
(长城 ) Davnine (M8) Fore 


图 14-8 第 三 部 分 DIV 效 果 图 
上 图 效果 的 关键 实现 代码 如 下 所 示 。 


1. <div style="padding:0 0px; margin-top:30px;"> 
2. <img src="img/beliebtestesuchbegriffe.gif" alt="beliebteste 
Suchbegriffe" /><br /> 


3 <span class="tcCTagl"><a href="#">IBM</a></span> 

ys <span class="tCCTag3"><a href="#">DELL (戴尔 ) </a></ 
span> 

Ss 

6. </div> 


由 于 上 面 的 DIV 比 较 简 单 ， 这 里 就 不 做 细致 的 分 析 了 ， 要 注意 的 是 字体 颜色 的 不 同 是 因 
为 每 个 span 里 都 引用 了 不 同 的 CSS。 


人 ER 搭建 页 脚 部 分 的 DIV 


首页 的 页 脚 部 分 是 比较 有 创意 的 ， 以 竖 列 的 方式 来 显示 导航 部 分 ， 效 果 如 图 14-9 所 示 。 


图 14-9 页 脚 部 分 的 DIV 设 计 


实现 这 部 分 的 代码 如 下 所 示 。 


1. <divid="pageFooter"> 
2 <div id="footerLinks" class="float"> 
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< 网 <div class="footerContainer"> 

4. <ul> 

- 调 <1i><a href="#"> 首 页 </a></1i> 

6. 

Ms </ul> 

8 </div> 

和 < <div class="footerContainer"> 

10. <ul> 

ls <1i><a href="#"> 数 码 相 机 </a></1i> 

5 

村 </ul> 

14. </div> 

AR <div class="footerContainer"> 

下 65 <ul> 

有 <1i><a href="#"><img src="img/socialIcons/rss.gif" alt="RSS-Feed"/> 
订阅 免费 新 闻 </a></1i> 

Os 到 

LD </ul> 


2Z0E </div> 
本 <div class="footerContainerCopyright"> Copyright gcopy; 2008-2010 by <a 


href="#"> 全 面 攒 机 网 </a> | 保留 一 切 版 权 . 


而 第 


2 <div class="footerContainersocial"> 

疙 3 <a rel="nofollow" style="text-decoration:none;" href="#" > 
24. <img src="img/socialIcons/digg.png" /></a> 

2 a 

6 </div> 


2 </div> 
285 </div> 
29. </div> 


在 上 述 代 码 中 ， 第 3~8 行 ， 第 9~14 行 ， 第 15~20 行 的 三 个 DIV 分 别 定义 了 三 列 的 导航 栏 ， 
21~27 行 定义 了 网 站 友情 链接 的 小 图 片 。 


人 ZX 首页 CSS 效 果 分 析 


描述 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 


页 中 其 他 CSS 的 效果 ， 如 表 14-2 所 示 。 
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表 14-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div id="searchContainer"> ”| 搜索 栏 的 样式 以 背景 图 片 来 定义 
#searchContainer { 


position:absolute; 


right:0; 
top:22px:; 


设置 此 DIV 的 背 
景 图 片 


background:transparent url(../img/ 
searchContainerBG.png) no-repeat; 


} 
<a href="#" 超 链 设 置 下 划 线 效果 
class="productLink"> a.productLink:hover{ text- 
decoration:underline; 
3 
<div class="content"> 将 一 张 小 图 横向 拉 伸 形成 虚线 分 隔 符 


.newProductsDefault div.content { 
padding-bottom:15px; 
padding-top:5px; 
backgroundiurl(../img/ 

dottedBorder] .gif) bottom repeat-x; 


14.3 在 首页 中 实现 动态 效果 


在 这 个 电脑 商城 网 站 中 ， 除 了 单纯 使 用 DIV+CSS 外 ， 还 使 用 了 JavaScript 实 现 网 页 的 动态 
效果 。 这 里 主要 体现 在 两 个 方面 ， 第 一 ， 当 鼠标 移 到 导航 上 时 ， 图 片 会 展开 ， 其 余 导 航 的 图 
片 会 自动 收缩 ， 如 图 14-10 所 示 。 


ra 


HW pws 四 


笔记 本 服务 器 


首选 品牌 骂 质保 。 质量 上 村 酸 务 优 5 


电脑 配件 


正版 配件 绝 无 假 上 


图 14-10 导航 栏 的 动态 效果 


第 二 ， 鼠 标 移 到 首页 、 注 册 等 导航 时 ， 整 个 小 模块 会 出 现 背 景色 ， 如 图 14-11 所 示 。 
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图 14-11 此 DIV 中 鼠标 停留 效果 


并 页 | 注册 登入 帮助 


下 尝 济 败 图 片 展 开 的 实现 方式 
为 了 实现 图 片 的 展开 效果 ， 首 先 需要 定义 每 一 个 导航 的 原始 宽度 ， 其 代码 如 下 所 示 。 


1. #topNavi ul#kwicks .kwick { 

2 display: block; 

3 cursor: pointer; <! 鼠标 变 为 手 型 --> 
4. overflow: hidden; 

人 height: 63px; 

6 width: 132px; <! 定义 原始 宽度 -- > 

好 padding:0 10px; 

8 background: #fff; 

9. 1} 


接着 把 要 显示 的 图 片 设 为 背景 图 片 ， 这 里 只 列 出 一 个 ， 其 代码 如 下 所 示 。 


1. #topNavi ul#kwicks .module { 
background:url(../img/navi module.png) no-repeat; 
< 


当 上 面 代码 定义 好 以 后 ， 再 定义 一 个 DIV， 在 DIV 中 引用 这 些 CSS， 代 码 如 下 所 示 。 


1. <divid="topNavi"> 

2 <ul id="kwicks"> 

3 <li><a class="kwickmodule" href="Shop-Design.html"><span> 台 式 机 <br /> 
2 品牌 机 ， 兼 容 机 </span></a></1i> 
与 上 

6 

7 


</ul> 
</div> 


后 再 定义 如 下 JavaScript 代 码 就 可 以 实现 图 片 的 展开 效果 。 


Var szNormal = 132, szSmall =110, szFull =190; 
<!-- 定义 图 片 正 常 ， 收 缩 ， 展 开 三 种 状态 下 的 宽度 -- > 
var kwicks= $$ ('#topNavi .kwick'); <! 获取 DIV 和 UL 的 ID -- > 

4. Var fx = new Fx.Elements (kwicks, {wait: false, duration: 200, transition: 
Fx.Transitions.quadout}); 

5. kwicks.each (function (kwick, i){ 
kwick.addEvent ('mouseenter', function(e){ <! 鼠标 停留 效果 -- > 
Var obj = {}; 
Spyllaull = 

'width': [kwick.getstyle('width') .toInt(), szFull] 


WwW IN 


woJa 
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10. }; 

sh kwicks.each (function (other, j){ <! 鼠标 停留 时 其 他 图 片 效 果 -- > 

= et if (other != kwick){ 

3s var w=other.getstyle('width') .toInt (); 

14. if (w!=50) obj[j] ={"'width': [w, szSmall]}; 

EE 让 

16. 1); 

Es fx.start (obj); 

18. py 

19. 1); 

人 20 $('kwicks') .addEvent ('mouseleave', function(e){ <! 鼠标 离开 效果 -- > 
2 var obj = {}; 

2 kwicks.each (function (other, j){ 

3 obj[j] = {"'width': [other.getStyle('width') .toInt(), szNormal]}; 
24. 1); 

2 fx.start (obj); 

26. }) 7 


上 面 代 码 中 ， 第 1 行 定 义 了 图 片 的 三 种 宽度 ， 第 三 行 获取 了 此 DIV 和 ul 的 ID， 在 第 6~10 
行 ， 定 义 了 鼠标 停留 时 图 片 展 开 的 效果 ， 在 第 11~19 行 定义 了 当 鼠 标 停留 时 ， 其 他 图 片 的 收 
缩 效 果 ， 在 第 20~26 行 定义 了 鼠标 离开 时 图 片 都 恢复 为 原始 宽度 的 效果 。 

定义 好 JavaScript 代 码 后 ， 在 首页 的 代码 中 ， 只 要 引用 这 个 js 文件 就 能 实现 鼠标 停留 时 图 
片 的 展开 效果 。 


全 一， 导航 小 模块 出 现 背 景色 


我 们 可 以 通过 下 面 的 步骤 ， 实 现 导航 小 模块 显示 背景 色 的 效果 。 
第 一 步 ， 在 ID 为 quickLinks 的 DIV 里 定义 若干 个 导航 信息 ， 下 面 我 们 就 给 出 一 个 范例 。 


1. <div id="quickLinks"> 

<ul> 

3 <1i><a href="index.html"> 首 页 </a></1i> 
4. <1i><a href="#"> 注 册 </a></1i> 

5 

6. </ul> 

7. </div> 


第 二 步 ， 在 CSS 中 定义 如 下 效果 ， 只 要 在 这 个 DIV 中 的 超 链 ， 当 鼠标 移 上 去 后 ， 其 背景 
色 都 会 变 为 ”#d3dce6 。 


1. #quickLinksa:hover, #quickLinks a:active, #quickLinks a:focus { 
有 Color:#3034387 

= background-color:#d3dce6; 
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14.4 ”台式 机 页 面 


人 台式 机 页 面 中 ， 使 用 图 片 加 文字 的 方式 展示 一 些 最 新 款 的 电脑 ， 让 网 友 有 购买 的 想法 。 
本 节 我 们 将 只 给 出 该 页 面 的 特点 ， 与 首页 相同 部 分 就 不 再 分 析 。 


14.4.1 


台式 机 页 面 左边 部 分 的 DIV 


人 台式 机 页 面 左边 部 分 需要 实现 如 下 的 特色 : 第 一 ， 一 
个 大 DIV 里 包含 有 3 个 小 DIV， 这 个 可 以 用 DIV 布局 的 方式 
来 实现 ; 第 二 ，3 个 DIV 的 宽度 相同 ，DIV 之 间 的 间隔 相 
等 。 这 部 分 的 显示 效果 如 图 14-12 所 示 ， 它 使 用 CSS 来 实现 


的 。 


上 图 依次 使 用 了 三 个 DIV， 每 个 DIV 都 有 标题 ， 都 使 


CSS 样 式 。 


了 不 同 的 样式 ， 使 整体 看 起 来 更 有 层次 感 。 部 分 的 实现 
代码 如 下 所 示 ， 请 注意 其 中 第 2 行 中 引入 的 ID 为 columnbo 的 


9 的 一 因 过 全 绊 弛 全 联 汪 人 
人 机 朋 学 个 


联系 客服 


于 


图 14-12 CSS 效 果 展 示 


1. <divid="leftCol"> 


这 


<div class="box"> 


3. <img src="img/boxIconVorteile.gif" style="position:absolute; margin:-5px 


00-8px;" 
4. 
padding-b 
Ss 
GE 
YY 
line-heig 
8 
9 


11. 
12. 
U3 


/> 
<div style="background:url (img/boxHeaderVorteile.jpg) no-repeat; 
ottom: 5px; "> <span class="boxHead"> 导 购 分 类 </span> </div> 
<div class="boxContent"> 
<ul> 
<1i style="background:url (img/dottedBorderl .gif) bottom repeat—x; 
ht:14px; padding: 6px 0;"> 台 式 机 </1i> 


</ul> 
</div> 


</div> 


div style="background:url (img/greenBox 01.gif) no-repeat; height:28px; 
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padding-top:5px; margin-top:30px;"> 

14. <img src="img/boxIconMail.gif" style="position:absolute; margin:-15px 0 0 
-9px;" /><span class="greenBoxHead"> 联 系 客服 </span> 

15. </div> 

16, <div style="background:url (img/greenBox 02.gif) no-repeat top 
#ddefb5 ; padding:10px 10px; height:173px; font-size:12px; font-weight:normal; 
line-height:16px;"> 


Er 

18. </div> 

LD; <div style="background:url (img/greenBox 03.gif) no-repeat top; 
height:9px; margin-bottom: 40px;"></div> 

2 </div> 


上 面 代码 显示 了 三 个 DIV 不 同 的 样式 ， 首 先是 第 一 个 DIV 的 样式 。 在 第 7 行 引 用 了 一 张 背 
景 图 片 ， 它 放置 在 最 底部 并 横向 拉 伸 ， 形 成 虚线 分 隔 符 ; 而 第 二 个 DIV 中 则 没有 引用 ， 所 以 
看 起 来 完全 就 是 两 个 效果 ; 第 三 个 DIV 则 在 第 20 行 引用 了 一 张 绿色 的 背景 图 片 ， 使 这 个 DIV 
看 起 来 又 是 另外 一 个 效果 。 

在 上 述 代 码 中 其 实 所 用 的 分 隔 方法 是 一 样 的 ， 只 是 在 不 同 的 地 方 引 用 了 不 同 的 背景 图 
片 ， 这 样 一 来 就 营造 了 一 个 完全 不 一 样 的 DIV 风格 。 


台式 机 页 面 右边 部 分 的 DIV 


台式 机 页 面 右边 部 分 分 成 两 部 分 ， 上 面部 分 是 网 站 推荐 商品 ， 下 面部 分 是 最 新 商品 推 
荐 ， 下 面 我 们 依次 分 析 这 两 个 部 分 。 

上 面部 分 网 站 推荐 商品 的 DIV， 效 果 如 图 14-13 所 示 ， 它 的 动态 效果 是 由 JavaScript 来 实现 
的 ， 而 DIV+CSS 并 没有 什么 特别 的 地 方 ， 这 里 就 不 再 做 详细 分 析 了 。 


联 息 Tdesf entre ES20<( 健行 TT 卫 连 版 


图 14-13 上 半 部 分 展示 效果 


右边 下 面部 分 是 最 新 商品 推荐 部 分 ， 它 使 用 一 个 大 DIV 包含 多 个 小 DIV 的 方式 来 实现 
的 ， 效 果 如 图 14-14 所 示 。 
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图 14-14 下 半 部 分 展示 效果 


这 部 分 的 关键 代码 如 下 所 示 ， 在 这 部 分 中 使 用 的 所 有 布局 都 是 一 样 的 ， 所 以 这 里 就 不 再 
做 重复 分 析 了 。 


1. <div style="width:610px; padding-top:30px;" class="float"> 
2 <div class="NPBox mr10"> 


3 <div class="NPBoxImg"> 

4. "class="border"> 

三 <img src="img/001.jpg" /></a> </div> 

6. <a href="#" class="productsLink"> 联 想 扬 天 A4600R</a> 

了 人 <div class="priceContainer"> RMB:3550<br /> 

8. <span class="tax"> 立 减 10%</span><br /></div> 

9. <a href="#"><img src="img/button buy now.gif" /></a> 
10. </div> 

FE 

12. </div> 
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汽车 网 站 


随 着 生活 水 平 的 日 益 提 高 ， 汽 车 开始 迅速 地 进入 人 们 的 家 庭 ， 汽 车 的 价 
格 、 性 能 和 维修 等 信息 ， 日 益 成 为 人 们 关心 的 热点 问题 。 

汽车 网 站 将 给 您 带 来 最 新 的 汽车 资讯 信息 ， 最 快 的 汽车 动态 报道 ， 大 量 
的 汽车 车 型 图 片 ， 最 准确 的 汽车 价格 走势 ， 本 章 我 们 分 析 汽 车 网 站 的 主要 页 
面 实现 方法 。 


15.1 网 站 页 面 效果 分 析 


在 本 章 中 ， 将 着 重 分 析 汽车 网 站 的 首页 和 ”新 车 介绍 “页面 的 设计 样式 ， 而 ”跑车 系 
列 ”页面 风格 和 新 车 介绍 页 面 的 风格 相近 ， 所 以 就 不 再 详细 分 析 了 。 


首页 如 


汽车 网 站 的 首页 布局 方法 是 非常 常见 的 ， 它 使 用 三 行 的 样式 ， 其 中 ， 第 一 行 里 放置 网 站 
Logo、 站 内 搜索 、 网 站 导航 等 部 分 内 容 。 第 二 行 里 ， 放 置 了 广告 、 新 闻 、 最 新 动 
态 、 新品 推荐 等 几 个 部 分 内 容 。 在 第 三 行 里 放置 部 分 导航 和 版 权 相 关 信息 。 

在 首页 中 ， 主 要 以 大 幅 的 广告 、 新 闻 、 最 新 动态 、 新 品 推荐 这 几 个 部 分 组 成 的 首页 主体 
部 分 ， 如 图 15-1 所 示 。 
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40/05/03 
| 


1010510 人 任用 和 村 污 
他 


10705701 中 于 中 心 预计 国内 车 市 5 月 继续 襄 好 
上 部 细 


强劲 新 品 ba 
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图 15-1 首页 的 效果 


GE 新 车 介绍 页 面 的 效果 分 析 - 


在 新 车 介绍 页 面 中 ， 放 置 新 车 的 导航 链接 、 新 车 详细 介绍 和 新 车 资讯 三 部 分 内 容 ， 通 过 
这 个 页 面 展 示 最 新 的 车 型 。 

这 个 页 面 采 用 了 三 行 样式 ， 其 中 ， 第 一 行 和 第 三 行 的 样式 与 首页 完全 一 致 ， 都 包括 页 
头 和 页 脚 ， 而 在 第 二 行 里 ， 用 车 的 导航 链接 、 车 的 详细 介绍 和 车 的 最 新 资讯 组 成 第 二 行 的 效 
果 。 下 面 我 们 就 只 给 出 第 二 行 的 效果 图 ， 如 图 15-2 所 示 。 
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和 15-2 新 车 介绍 的 效果 图 
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ORE 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 15-1 所 示 。 


表 15-1 汽车 网 站 文件 和 目录 一 览 表 


网 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
three .html 新 车 介绍 
two.html 跑车 系列 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
2 本 网 站 需要 用 到 的 


15.2 ”规划 首页 的 布局 


因为 需要 搭建 的 是 一 个 图 片 比较 多 的 汽车 网 站 ， 所 以 网 站 首页 的 设计 就 比较 重要 了 ， 下 
面 ， 我 们 就 来 依次 分 析 首页 的 重要 部 分 的 实现 方法 。 


搭建 首页 页 头 的 DIV 


首页 页 头 部 分 是 比较 重要 的 部 分 ， 它 包含 了 网 站 Logo 部 分 、 网 站 的 导航 部 分 和 站 内 搜索 
部 分 ， 页 头 部 分 的 效果 如 图 15-3 所 示 。 


图 15-3 首页 页 头 设计 分 析 图 


页 头 的 关键 实现 代码 如 下 所 示 。 


. <divid="decCabecera"> 
<div class="cabecera"> 
<div class="columnaDerechaPie"> 
<ul class="basicos"> 


<1i class="textoB"><a class="menubasico" lang="es" href="#"> 中 文 版 </ 


<li class="texto"><a class="menubasico" href="#"> 日 本 语 </a></1i> 


ED 
3 
4 
与 六 <li class="textoB"><a class="menubasico" href="#">English</a></1i> 
6 
站 
Ph 
8 </ul> 
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加 </div> 
10. </div> 
11. </div> 


12. <div id="decMenuSup"> 
13. <divid="menuPrincipal"> 


14. <div id="logoIberdrola"> 

LS <div> 

16s <h1l> </h1> 

7 </div> 

de <a id="inicioTabulacion" href="#"><img id="logotIber" src="img/1logo- 


jpg" width="156" /></a></div> 
9 <div id="menuWeb"> 
2 <ul id="ulMenuWeb"> 


2 <1i id="opcionl" > <a id="aOpcionl" class = "opcionlon" href="index. 
htm" > 首页 </a> </1i> 
2 


235 </ul> 
24. </div> 


2 <div id="buscador"> 

26. <label for="txtbuscador" class="labelCajaBuscador"> <span 
class="textobuscador"> 搜 索 </span> 

2 <input type="text" name="cadenabusqueda" class="cajabuscador" 
id="txtbuscador" /> 

28. </label> 

2 <noscript> 

0 <div class="opcionesBusquedaNoscript"> 

S31 </div> 

3 <img src="img/pixel.gif" style="float:left" alt="&nbsp;" height="100" 
width="45"/> 

3 </noscript> 

DA. <div id="opcionesBusqueda" > 

< <div class='bordesopcbusqueda'> 

36. <div class='cerrar' id="botoncerraravanzadas"> 

i <div id="'busqueda cerrar'></div> 

38. </div> 

9 <br class="finbloquefloat"/> 

40. <div id="inputsbusqueda"></div> 

41. </div> 

2 <div id="cierreBusqueda" class='cerrar'></div> 

长 他 </div> 

44. <input id="imagenbuscar" class="imagenbuscar" type="image" src="img/ 
lupa_buscador.gif" value=" 搜 索 "/> 

45. </div> 

46. </div> 

47. </div> 


上 面 代码 ， 第 2~10 行 是 搭建 网 站 的 选择 语言 部 分 ， 这 部 是 使 用 和 上 i 标签 的 有 序列 表 ， 第 
14~18 行 搭建 的 是 网 站 的 Logo 部 分 。 而 第 19~25 行 则 是 网 站 的 导航 部 分 ， 这 部 分 也 是 由 ul 和 li 
标签 的 有 序 类 表 组 成 的 ， 第 25~45 行 是 页 头 的 搜索 部 分 。 
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搭建 ”广告 ”部 分 的 DIV 


广告 部 分 是 首页 主体 部 分 比较 重要 的 一 部 分 ， 在 这 部 分 中 可 以 放置 flash 或 者 图 片 。 这 里 
就 以 放置 图 片 为 例 ， 其 效果 如 图 15-4 所 示 。 


四 


图 15-4 广告 部 分 的 DIV 效果 


这 部 分 的 实现 代码 如 下 所 示 。 


1. <divclass="contentsinflash"> 
2. <img src="img/996267.jpg" border="0" /> 
3. </div> 


这 部 分 的 DIV 的 搭建 是 比较 简单 的 ， 所 以 这 里 就 不 再 做 说 明了 ， 要 注意 的 就 是 这 个 DIV 
引用 了 ID 名 为 contentsinflash 的 CSS， 在 这 个 CSS 中 ， 定 义 了 这 个 DIV 的 背景 图 片 和 DIV 中 图 片 
的 位 置 ， 代 码 如 下 所 示 。 


1. .contentsinflash{ 
2 width:94%; 
3 font-family: Trebuchet MS", verdana, sans-serif; /* 设置 文本 的 序列 */ 
a margin:0Opx; 
5 padding:20px 30px 20px 30px; /* 设置 上 下 左右 的 内 边 距 */ 
6 background-image: url(../img/fondo flash.gif); /* 设置 背景 图 片 */ 
ja float:left; 
Wk 
在 上 述 代码 中 ， 第 5 行 设置 广告 在 DIV 中 的 位 置 ， 而 第 6 行 设置 背景 图 片 ， 因 为 第 5 行 设置 
了 图 片 的 内 边 距 ， 所 以 是 这 张 图 片 看 上 去 有 相框 的 效果 。 


搭建 ”最 新 新 闻 ” 部 分 的 DIV 


最 新 新 闻 ”部 分 是 首页 主体 部 分 第 二 行 的 第 一 部 分 ， 这 部 分 的 主要 内 容 是 关于 汽车 的 
一 些 新 闻 ， 效 果 如 图 15-5 所 示 。 
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10/05/04 美 国 4 月 车 市 同比 


10/05/03 美 汽车 销量 动 增 通用 村 得 月 度 头 各 
| 详细 


10/05/01 车 用 甲醇 汽油 国标 或 年 内 出 间 | 详 
细 


10105/01 中 访 
| 详细 


册 


15-5 最 新 新 闻 部 分 DIV 的 效果 图 


这 部 分 的 实现 代码 如 下 所 示 。 


1. <xdivclass="noticias"> 

2. <divigd="botonmas"> 

3 <h2 class="tit not"> 

4. <aid="ultimas noticias" class="ultimas noticias"href="#"> 
5 <span class="tit_home"> 最 新 新 闻 </span><span id="btnmas"></span></a> 
有 </h2> 

a </div> 

8 <div class="clear"></div> 

9 <div class="textonoticias"> 

10. <ul class="ult not"> 

Tis <1i> <a class="mashome" href="#"> 

人 <span class="negrita texto">10/05/04</span> 

3 美国 4 月 车 市 同比 增长 20% 

14. span class="verdemashome"> 详 细 </span> </a> </1i> 

5 

FE </ul> 

Ri </div> 

18. </div> 


以 上 述 代 码 中 可 以 看 出 ， 这 部 分 是 由 ul 和 ii 标 签 的 有 序列 表 组 成 的 ， 代 码 中 
新 闻 的 实现 代码 ， 在 图 15-5 中 可 以 看 出 这 一 条 新 闻 的 日 期 、 内 容 等 信息 的 字体 颜色 、 


DU 


只 给 出 第 一 条 
字 


小 都 是 不 同 的 ， 这 里 的 实现 方法 就 是 把 它们 包含 在 不 同 的 span 里 。 


搭建 ”新 车 上 市 ”部 分 的 DIV 


新 车 上 市 部 分 是 首页 主体 部 分 第 二 行 的 第 二 部 分 ， 这 部 
分 显示 的 是 最 新 上 市 的 新 车 ， 这 部 分 的 效果 如 图 15-6 所 示 。 


下 面 给 出 这 个 DIV 的 关键 实现 代码 。 i 


致 性 将 拱 载 EcoBoost GTDI 发 动机 
全 力 加 速 拓展 中 国 市 场 


图 15-6 新 车 上 市 部 分 的 效果 
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1. <div id="moduloacordeon" class="modulo"> 

汉 <ul id="menuacordeon"> 

E] <li class="menunivell"> 

4. <div id="acordeon1"> 

1 <div class="capaFondo"> 

6 <div class="capaIz"></div> 

ye <div class="capaTexto"> 

由 <div class="textoCapaMoo"> <a href="#" id="enlaceacordeon1"> 福 特 3 
款 新 车 首发 北京 国际 车 展 

9. <span class="textoOculto"> 

10. </span> </a> </div> 


hs </div> 

El <div class="capaDer"></div> 

是 33> </div> 

14. </div> 

Ls <ul id="ulacordeonl" class="submenuacordeon"> 

16. <1i id="liacordeonl" class="subacordeon"> <a class="menuacordeon" 


href="#" id="enlaceimagenacordeonl"> <span class="tituloopcionacordeonblan 
co"> 福 特 3 款 新 车 首发 北京 国际 车 展 </span> <img src="img/presentacion resultados.jpg" 
class="imagenopcionacordeon" /> </a> </1i> 


了 从 </ul> 
:加 < 
和 9 

20E </ul> 
21. </div> 


页 面 上 这 样 的 代码 一 共有 三 个 ， 上 面 只 给 出 一 个 示例 。 在 这 部 分 代码 中 ， 最 外 面 的 部 分 
是 由 ul 和 1i 组 成 的 ， 而 在 ul 和 1i 的 组 合 中 又 加 入 了 DIV 财 套 和 另 一 个 u 和 1i 的 组 合 。 
其 中 第 4~14 行 是 标题 部 分 ， 第 15~17 行 是 正文 部 分 ， 而 这 部 分 的 动态 效果 则 是 由 JS 来 实 
现 的 ， 这 里 就 不 做 分 析 了 。 


搭建 ”最 新 动态 “部 分 的 DIV 


最 新 动态 部 分 是 主体 部 分 的 最 后 一 部 分 ， 这 部 分 包含 了 一 些 新 品 图 片 和 说 明 ， 其 效果 如 
图 15-7 所 示 。 


最 新 动态 部 分 


-~ 


四 


15-7 最 新 动态 部 分 的 DIV 效果 图 


部 分 的 关键 实现 代码 如 下 所 示 。 


尘 
了 
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1. <divid="carrusel" class="jcarousel-skin-tango"> 


2 <ul id="uldestacadoscarrusel" class="ulcarousel"> 

Ss <li class="licarousel"> 

4 <div id="capacarruselsuperiorl" class="capainfcarrusel"> 

<p class="textocontenidoenlace"> <span class="titulo"> 强 劲 新 产品 阵容 

6. </span> <span class="contenido"> 推 动 盔 利 性 增长 汽车 第 一 季度 实现 净利 21 亿 美元 </ 
span> </p> 

a </div> 

8 <div id="capacarruselinferiorl" class="capasupcarrusel"> 

9 <p class="textocontenidoenlace"> <a class="bannercarrusel" 
hre " id="enlacecarruselsuperiorl"> <img src="img/movilidad verde.jpg" 
id="imgcapacarruselinferiorl" class="imagenacordeon" /></a> </p> 

LO </div> 

h </1i> 

2 

3 </ul> 

14. <div class="jcarousel-scroll"> 

Le <div id="flechaspaginarcarrusel" class="paginador"></div> 

I </div> 

Et <br class="finbloquefloat" /> 

18. </div> 


上 面 代 码 中 ， 第 5~7 行 是 鼠标 停留 时 的 效果 ， 第 8~10 行 是 原本 的 效果 ， 其 余部 分 的 搭建 
方法 和 这 个 是 一 样 的 ， 这 里 就 不 再 重复 说 明了 。 

这 部 分 中 ， 图 片 的 滚动 效果 和 鼠标 的 停留 移 开 效果 都 是 使 用 JS 来 实现 的 ， 这 里 我 们 也 不 
做 详细 介绍 了 。 


搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明 、 友 情 链接 和 网 站 Logo 等 内 容 ， 效 果 如 图 15-8 
所 示 。 


图 15-8 页 脚 部 分 的 DIV 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <dqiv id="decPie"> 


到 > <div class="columnaIzquierdaPie"> 
3 <ul class="basicosinferiorA"> 
4. <1i class="pieIcono"> <a class="iconoencpieinferior" href="#" 


rel= "external"> 
二 <img class="iconoinferior" src="img/l1ogo CONFIANZA.jpg" /> 
<span class="iconoventanafoto"></span></a> </1i> 


</ul> 
</div> 
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10. <div class="columnaDerechaPie"> 
Eb <ul class="basicos"> 
于 <1Li class="pieIcono"> <a class="iconoencpie" href="#" coords="700" 


charset="700" rel="script"> <img class="icono" src="img/icono24.gif" width="100%" 
/><span class="iconoventanafoto" 


下 3 ></span></a> </1i> 

14. <li class="textoB"><a class="menubasico" href="#"> 网 站 地 图 </a></1i> 
5 

6 </ul> 


由 </div> 
了 Be <div class="clear"></div> 
让 <div class="columnaDerechaPie"> 


20. <ul class="cae”> 

4 <li class="textoc"><span class="copyrigth">@ 2010 汽车 公司 保留 一 切 权利 </ 
span></1i> 

2 </ul> 

38 </div> 

24. </div> 

25. ‘</div> 

26. </div> 


其 中 第 3~8 行 是 网 站 友情 链接 部 分 ， 第 11~16 行 是 网 站 的 导航 部 分 ， 第 21 行 是 版 权 声 明 部 


分 。 


GWA 首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 15-2 所 示 。 
表 15-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 
<span class="verdemashome "> 定义 字体 颜色 


.verdemashome{color:#276015;text- 


decoration:none;font-weight:bold;} 


<div id="capacarruselsuperior2" | 设置 字体 的 左右 内 边 距 


class="capainfcarrusel "> .capainfcarrusel { 
margin:0px Opx Opx 0px; 
padding:24px 0 18px 30px; 
color:#FFFFFF; 
float:left; 
} 
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15.3 ”在 首页 中 实现 菜单 的 动态 效果 


在 汽车 网 站 首页 页 头 的 菜单 部 分 ， 使 用 ul 和 1i 实 现 菜单 ， 如 图 15-9 所 示 ， 当 鼠标 移 到 公司 
新 闻 的 菜单 选项 上 ， 出 现 样 式 的 效果 。 


Eneksh | 中 文 版 | 日 本 语 


图 15-9 菜单 动态 效果 示意 图 


菜单 部 分 的 实现 代码 如 下 所 示 。 


1. <div id="menuWeb"> 
2. <ul id="ulMenuWeb"> 
< <1li id="opcionl" > <a id="aOpcionl" class = opcionlon" > 首页 </a></1i> 


4. <1li id="opcion2" > <a id="aOpcion2" class = "opcion2" > 企业 介绍 </a> </1i> 
5 

6. <!-- // 以 上 菜单 代码 --> 

a </ul> 

8. </div>| 


在 上 面 代码 中 ， 我 们 对 1 内 部 的 锚 点 标记 应 用 伪装 ， 代 码 如 下 所 示 。 


1. divimenuWeb{margin:0px; padding:0px; float:left; position:relative; 


2. divimenuWeb ul#ulMenuWeb{ margin:0px; padding:0px;} 
3. divi#menuWeb ul#ulMenuWeb li{display:inline;float:left; line-height:1lem;} 
4. div#menuWeb ul#ulMenuweb lia{f /**//div 下 ul 下 1i 中 a 的 默认 样式 **/ 


5 font-family:trebuchet MS; 
Gk font-size:0.8em; 

35 Color:#ffffff; 

8. text-transform:uppercase; 
9 text-decoration:none; 

Eo eh 


11. /****// 以 上 为 菜单 的 默认 样式 ****/ 
12. div#menuWeb ul#ulMenuWeb 1i a.opcionl:link,divi#menuWeb ul#ulMenuWeb 1i 
a.opcionl:visited{ 


3 background:#66AB05 url(../img/menu enopcionl.gif); 
14. padding:7px 3px 0px 13px; 

Ds width:5.35em; 

6. height:3.15em; 

加 float:left; 

0: 
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19.html:first-child div#menuWeb ul#ulMenuWeb li a.opcionl:link,a. 
opcionl:visited{width:5.25em; height:3.05em; } 
A A hd 


21. div#menuWeb ul#ulMenuWeb 1i a.opcionl:focus{ 


22。 background-image:url(../img/menu enopcionl over.gif); 
color:#123100; cursor:pointer; 
2 


24. div#menuWeb ul#ulMenuWeb 1i a.opcionl:hover,divimenuWeb ul#ulMenuWeb 1i 
a.opcionl:active{ 


人 2 background-image:url(../img/menu enopcion1l over.gif); 
26. color:#123100; 

Sa cursor:pointer; 

2 


29. /****// 以 上 引用 了 类 名 为 opcion1 伪 类 样式 *****/ 


30. divi#menuWeb ul#ulMenuWeb 1i a.opcionlon{ 


le background-image:url(../img/menu enopcion1l over.gif); 
2 padding:7px 3px 0px 13px; 

号 3 width:5.35em; 

KE height:3.15em; 

SS float:left; 

36. color:#123100; 

S37. 

38. html :first-child div#menuWeb ul#ulMenuWeb 1i a.opcionlon{ 
A width:5.25em; 

40. height:3.05em; 

ql 


42. /****// 以 上 引用 了 类 名 为 opcion1lon 伪 类 样式 *****/ 


请 注意 在 上 面 代 码 的 第 1 行 ， 我 们 通过 类 选择 器 来 决定 菜单 是 否 被 选中 ，hover 指 定 锚 点 
聚焦 或 者 释放 标签 的 行为 。 


新 车 介绍 页 面 以 图 片 和 文字 描述 为 主 介绍 新 车 ， 新 车 介绍 页 面 的 显示 效果 如 图 15-2 所 示 。 


新 车 介绍 页 面 左边 列表 的 DIV 


新 车 介绍 页 面 左边 的 列表 设计 ， 使 用 了 ul 和 Ii 标签 ， 我 们 已 经 对 这 种 方法 进行 过 多 次 介 
绍 ， 左 边 列表 的 效果 如 图 15-10 所 示 。 
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蝙 岂 Murcielago LP676x5 


蝙 晤 Murcielagn LP6 
善 拉 多 Lp550-2 (ram | 
盖 拉 多 LP570-4 Superieggera 

善 拉 多 Lp560-45.0 手 动 档 

盖 拉 多 Lp560-4 Coupe 

蝙 幅 Murcielagn LP640 E-Gear 

蝙 蝙 Wurcielago LP640 Roadster 


图 15-10 相关 车 型 列表 效果 图 


上 图 列表 区 域 包含 在 ID 为 decIzquierda 的 容器 内 ， 其 中 decTituloNivel 和 decMenuVer 这 两 个 
DIV 容器 用 来 显示 标题 和 列表 ul， 如 下 代码 所 示 。 


1. <div id="decIzquierda"> 


2 <div id="decTituloNivel"> 

3 <div class="tituloNivel"> 

2 <h2 class="nive12"> 新 车 解码 </h2> 

:全 </div> 

6. </div> 

3 <div id="decMenuVer"> 

9 <div id="menu izq" style="clear:both;"> 

9. <div class="bordesupmenunive13">&nbsp;</div> 

10. <ul class="menuVertical3" style="padding-left:0 

Ei <1li class="primero"><a class = "menuNivel2a" hre " > 蝙蝠 Murcielago 
LP670-4SV</a></1i> 

a <!--// 列 表 项 代码 略 --> 

3 </ul> 

hE <div class="claseCierre">gnbsp; </div> 


Ss </div> 
I </div> 
17. </div> 


下 面 我 们 给 出 一 个 CSS 实 现代 码 为 例 。 


1. div#decIzquierdat 


2 position: relative; 

3 float:left; 

4. width: 14.75em; 

全 margin: 0pPX 0px 20px 0px; 
6. } 

7. div#decTituloNivel { 

: 肖 position: relative; 

: 避 float:left; 

0 width:236px; 

FE height:3.5em; 

LE by margin: -2px 0px Opx Opx; 
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Ek 

14. div#decMenuVert{ 

人 position: relative; 

6s float:left; 

7 width:14.75em; 

18 . margin: -2px 0px Opx Opx; 7*#7/ 定 位 */ 
ER. 2 

20. div.tituloNivel h2 .nivel21{ 

Zs color: #66ab05; 

学 六 7 font-family: "Trebuchet MS", verdana, sans-serif; 
2 text-decoration:none; /** 无 下 划 线 */ 

24. font-size: 1.5em; 

2 line-height: 25px; /* 行 高 25 像 素 */ 

265 margin-top: Opx; 

7 和 用 margin-bottom: Opx; 

2 font-weight: normal; 

2 text-align:left; 

305. 


如 上 代码 所 示 ， 页 面 效 果实 现 依 然 是 按照 外 部 容器 实现 统一 标记 和 定位 ， 包 括 定 位 、 边 
框 、 背 景色 或 文字 等 ， 内 部 容器 实现 具体 项 定义 ， 包 括 每 项 应 用 的 字体 行 高 、 背 景色 、 伪 类 


新 车 介绍 页 面 右边 部 分 的 DIV 


新 车 介绍 页 面 右边 部 分 分 成 两 部 分 ， 左 半 部 分 是 汽车 介绍 ， 右 半 部 分 是 汽车 图 片 ， 如 图 
15-11 所 示 。 


玖 


15-11 新 车 介绍 汽车 介绍 效果 图 


实现 此 部 分 效果 的 DIV 代码 如 下 所 示 。 


1. <divid="container contenido"> 


we <div id="botonera sup"> 
3 <div id="imp"></div> <!---// 空 白 边 距 ---> 
4. <div id="rss"> <a id="btnrss" tabindex="1" href= 
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btn rss small.png" id="brss" alt="Rss" /></a> </div><! ---//RSS 图 标 ---> 

</div> 

5 <hl ig="titulo"> 上 暴怒 公牛 LP 670-4 SV</h1> 

Es <div class="clear"></div> 

8. <div class="dosColumnaIgualIzquierdaContenido"> 

9. <div class="seccionContenido"> 

10. <p class="justificado"><span class="negrita texto"> 最 新 报价 : 730 万 </ 
span></p> 

' <p class="justificado"> 兰博基尼 Murciélago LP 670-4 SuperVeloce 车 身 前 端 
采用 全 新 设计 ， 定 位 前 倾 并 饰 以 亚 光 黑 漆 。 “. .// 略 

到 及 </div> 

3 <div class="clear"></div> 

14. </div> 

ye <div class="dosColumnalgualDerechaContenido"> 

16. <div class="seccionContenido"> 

<div class="centrado"><img class="centrada" src="img/001.jpg"alt= 
width="100%" /> 

185 <div class="piefotoContenido"> Murciélago LP 670-4 SuperVeloce 不 仅 具 
更 强 的 驾驶 性 能 ， 设 计 独 特 是 一 大 亮点 ， 并 进行 了 诸多 改进 ， 另 外 这 款 跑 车 全 球 限量 发 行 350 台 。</div> 

9 </div> 

205 </div> 

2 <div class="clear"></div> 

人 </div> 

23. </div> 


这 块 区 域 划 分 成 为 三 


部 分 ， 顶 端 包含 虚线 分 割 和 rss 的 容器 ， 左 边 为 新 车 介绍 文章 ， 右 边 


包 含 新 车 的 图 片 和 文字 说 明 。 其 中 新 车 介绍 使 用 了 class 为 dosColumnalguallzquierdaContenido 


的 CSS， 其 代码 如 下 所 示 。 


Ls 
pe 
3 
4. 
9 
6. 
Te 
8. 
光 忆 
10. 
Ls 
Ey 
13. 
14. 
ES 
16. 
17. 
EE 
9s 
20. 
2 
2 


.container contenido{ 
position:relative; 
z-index:13; 
background:#ffffff; 
} 
#botonera sup{ 
height:18px; 
width:99.8%; 
padding-top: 3px; 
text-align: right; 
} 
.justificado{ 
text-align: justify !important; 
/*margin-bottom:17px;/*1.06em*17px*/ 
margin:0px Opx 0px Opx; 
padding:0px 0pzx 10px 0px;} 
.columnaIzquierdaFaldon, .columnacentroFaldont{ 


height:15.13em; /*233px*/ 

} 

.negrita texto{ color: #262626;} 
.descFaldont{ 


background-repeat :no-repeat !important; 
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2235 position:relative; 

24. float :left; 

5 font-family:Trebuchet MS; 
26, height:11.875em; 

2 text-decoration:none; 
28< width:12.53em; 

2 


30. /**// 其 他 样式 略 **/ 


上 述 代 码 中 ， 主 要 作用 是 对 右边 部 分 的 容器 进行 定位 ， 例 如 顶部 区 域 右 对 齐 、 顶 边 距 间 
隔 3 像 素 、 实 际 宽度 和 高 度 等 ， 这 里 罗列 出 来 的 CSS 代 码 比较 多 ,为 了 让 大 家 自 上 而 下 的 看 清 
楚 如 何 编写 CSS。 我 们 一 般 从 最 外 部 的 父 类 容器 开始 编写 起 ， 先 整体 后 局 部 ， 这 个 方法 一 定 
要 牢记 。 


美观 的 巧克力 网 站 设计 


本 章 我 们 将 分 析 一 个 以 巧克力 为 主题 的 购物 网 站 ， 在 这 个 网 站 的 首页 
中 ， 我们 采用 四 行 布局 方式 ， 而 商品 展示 页 面 采 用 两 行 布局 方式 ， 这 种 设计 
上 的 变化 我 们 可 以 通过 简单 地 改变 CSS 样 式 代码 来 实现 。 

这 个 网 站 中 ， 大 家 将 看 到 很 多 精美 绝伦 的 巧克力 图 片 ， 这 也 是 本 网 站 的 
特色 ， 下 面 我 们 就 一 起 进入 巧克力 的 世界 吧 ! 


16.1 网 站 页 面 效果 分 析 


在 本 章 中 ， 我 们 将 介绍 首页 、 产 品 列表 面 、 产 品 详细 和 联系 我 们 页 面 ， 并 重点 讲述 其 中 
比较 复杂 的 首页 、 产 品 列表 页 和 产品 详细 页 面 ， 其 他 页 面 的 代码 大 家 可 以 从 与 本 书 配套 的 下 
载 资源 中 获取 。 

这 个 网 站 的 风格 是 : 第 一 ， 将 网 站 Logo 放 在 醒目 的 位 置 以 突显 这 家 企业 的 标记 ， 第 二 
色彩 采用 多 色调 ， 要 给 浏览 者 留 下 足够 深 的 印象 ， 从 而 使 用 户 记 住 这 家 企业 ， 第 三 ， 布 局 简 
单 化 ， 让 用 户 简单 明了 地 看 到 这 个 网 站 有 些 什 么 内 容 ， 第 四 ， 图 片 精美 大 方 ， 设 计 企业 网 
站 ， 那 图 片 就 一 定 要 精美 大 方 。 


CE 首页 效果 分 析 


页 的 大 致 效果 如 图 16-1 所 示 ， 它 是 一 个 四 行 的 布局 样式 。 在 第 一 行 里 ， 放 置 了 导航 信 
息 。 在 第 二 行 里 ， 放 置 的 是 企业 Logo 与 企业 横幅 广告 。 在 第 三 行 里 ， 分 别 用 两 列 来 显示 巧 
克 力 文化 ”和 ”巧克力 产品 展示 ”元素 ， 在 ”产品 展示 ”这 一 列 里 ， 放 置 的 是 企业 最 新 的 7 
品 。 第 四 行 页 脚 部 分 ， 放 置 版 权 等 信息 。 
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生生 对 W735 克 力 ,其 一 训 江 下 人 本 向。 
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图 16-1 首页 的 效果 图 


人 LE， 巧克力 产品 列表 页 面 的 效果 分 析 


巧克力 产品 列表 页 面 采 用 了 三 行 的 样式 ， 其 中 的 页 面 的 页 头 和 页 脚 与 首页 相同 ， 而 在 第 
行 里 ， 使 用 了 两 个 DIV， 分 别 放置 产品 分 类 信息 和 产品 图 片 信息 ， 页 面 效果 如 图 16-2 所 示 。 


首页 /7 产品 尼采 从 关于 我 们 个 联系 用 们 


Do late 


第 二 行星 放置 产品 分 
类 和 产品 图 片 信息 


四 


图 16-2 巧克力 产品 列表 页 面 的 效果 
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巧克力 网 站 的 文件 综述 


在 这 个 网 站 


Ph， 除 了 包括 刚才 分 析 的 首页 和 商品 展示 页 面 外 ， 还 包括 “巧克力 详细 介绍 


页 面 和 联系 我 们 页 面 ， 而 这 些 页 面 中 所 用 到 图 片 ， 都 放置 在 images 目 录 中 ， 文 件 及 其 


功能 如 表 16-1 所 示 。 


表 16-1 购物 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 

页 面 文件 index.htm 首页 
gallery.html 巧克力 分 类 展示 页 面 
details.htm 巧克力 详细 描述 的 页 面 


images 目 录 


contract.htm 


联系 我 们 的 页 面 
本 网 站 的 样式 表 文件 
本 网 站 需要 用 到 的 图 片 


style.css 


之 下 所 有 的 图 片 


16.2 ”规划 首页 的 布局 


在 上 一 节 中 ， 我 们 已 经 介绍 了 将 要 开发 的 两 个 页 面 的 大 致 结构 ， 本 节 我 们 将 在 规划 的 基 


础 上 完成 首页 切 


的 工作 。 


《本 才 首页 切 图 _ 


美工 根据 需求 ， 将 构造 出 psd 格 式 的 效果 文件 ， 当 需求 方 〈 比 如 这 里 的 巧克力 网 站 的 


原料 。 
首 
需要 三 类 
片 : 页 头 
背景 图 片 
页 头 上 
Logo 图 
和 巧克力 


户 ) 感觉 满意 以 


页 


全 园 


出 可 于 全 


品 图 片 ， 


片 切割 如 
16-3 所 示 。 


后 ， 需 要 切割 页面 中 的 素材 〈 比 如 图 片 等 ) ， 以 此 作为 后 继 开发 的 


Ci 
RP 
Tey 


到 16-3 首页 的 切 图 效果 
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在 页 头 的 背景 图 片 中 ， 由 于 导航 文字 以 后 可 能 会 变 多 ， 日 后 需要 适当 地 调整 宽度 ， 这 个 
功能 可 以 通过 CSS 中 的 ”设置 宽度 ”编码 实现 。 


搭建 首页 网 站 导航 部 分 的 DIV 


我 们 已 经 分 析 了 ， 首 页 可 以 分 为 四 行 ， 其 中 ， 第 一 行 放置 导航 信息 的 页 头 ， 它 需要 包含 
绿色 系 的 背景 图 片 ， 页 头 部 分 DIV 的 效果 如 图 16-4 所 示 。 


图 16-4 首页 页 头 的 DIV 效果 图 
实现 页 头 部 分 的 代码 如 下 所 示 。 


1. <div id="top_menu"> <! top_menu 的 css， 指 定 宽度 - -> 

2. <ul class="menu"> <! ul 的 menu 的 css， 指 定 高 度 宽度 和 边框 信息 --> 
号 <! a 标记 的 nav 定 义 了 鼠标 移动 上 的 效果 - -> 

4 <1i><ahref="index.htm" class="nav "> 首页 </a></1i> 

Gi <1li><ahref="gallery .html" class="nav "> 产品 展示 </a></1i> 

6 <1i><ahref="details.html" class="nav"> 关 于 我 们 </a></1i> 
<1i><ahref="contact .html" class="nav"> 联 系 我 们 </a></1i> 

8 </ul> 

9. </div> 


在 上 面 代码 的 第 1 行 中 ，DIV 通 过 引用 top_menu 这 个 CSS 来 指定 这 个 DIV 的 宽度 ， 并 且 定 
义 了 它 的 内 边 距 为 15 个 像素 (padding:15px;) 。 
在 第 2 行 中 ，ul 引 用 了 menu 这 个 CSS， 在 这 个 CSS 中 有 个 很 重要 的 属性 是 
display:inline; ， 它 能 让 原本 竖 列 显示 的 导航 栏 变 成 为 行 显示 。 
在 第 4 行 里 ， 超 链 使 用 CSS 的 方式 引入 了 小 图 标 ， 并 利用 超 链 的 鼠标 移 上 去 和 离开 两 个 属 
性 ， 使 小 图 标 出 现 了 明暗 变换 的 效果 ， 这 个 效果 的 实现 代码 将 在 后 文中 讲述 。 


搭建 首页 Logo 部 分 的 DIV 


按照 前 文 的 思路 ， 我 们 还 是 使 用 DIV 的 方式 构建 首页 Logo 部 分 ， 这 部 分 的 效果 如 图 16-5 
所 示 ， 它 包括 网 站 Logo 和 ”企业 横幅 广告 ”两 部 分 内 容 。 
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左边 是 logo， 右 边 是 以 背景 图 
显示 方式 的 企业 横幅 广告 


所 史记 委 职 早 引进 并 入 姥 
) 的 吓 后 住 在 名 西 哥 东 市: 
》- 山泉 梅 究 人 呈 


图 16-5 Logo 部 分 的 DIV 效果 图 


这 部 分 关键 实现 代码 如 下 所 示 。 


1. <div id="top_banner"> <! 通过 指定 宽度 高 度 和 背景 图 片 - -> 

2. <ahref= "index.htm"><img src="images/logo.jpg" width="230" height="130" 
alt="home" title="1ogo" border="0" class="1logo" /></a> 

Sa /divs 

在 第 1 行 中 ， 通 过 top_banner 这 个 CSS， 指 定 了 这 个 DIV 的 宽度 和 高 度 ， 而 且 指 定 了 一 
与 企业 Logo 颜 色相 近 的 背景 图 片 ， 并 使 图 片 右 对 齐 。 

这 个 CSS 的 代码 如 下 所 示 ， 由 于 在 第 4 行 里 指定 了 background 为 no-repeat， 因 此 背景 图 片 
将 不 会 重复 拉 伸 。 


1. #top_banner { 

2 width:850px; <! 指定 宽度 - -> 

35 height :130px; <! 指定 高 度 - -> 

4 background:url (images/illustr.jpg) no-repeat right; <! 指定 背景 图 片 
--> 


5 


在 第 2 行 里 ， 则 指定 了 巧克力 网 站 的 Logo， 并 指定 了 Logo 图 片 的 宽度 、 高 度 等 属性 ， 这 
个 Logo 图 片 使 用 了 ID 为 logo 的 CSS， 代 码 如 下 所 示 。 


img. logo { padding-left:15px; } 
它 用 来 说 明 Logo 图 片 的 内 左边 距 为 15 个 像素 。 


搭建 “巧克力 文化 和 巧克力 产品 “部 分 的 DIV 


首页 的 第 三 行使 用 两 个 大 列 来 分 别 描述 ”巧克力 文化 和 ”巧克力 产品 展示 信息 ， 它 
一 个 大 的 DIV 套 两 个 DIV 来 实现 ， 效 果 如 图 16-6 所 示 。 


201 


QQ、|DIV+CSS 由布 局 案例 精粹 (第 2 版 ) 


202 


第 二 烈 产品 


图 16-6 首页 第 三 行 元 标的 设计 


从 上 图 中 我 们 看 到 ， 这 个 大 的 DIV 里 用 了 诸多 小 DIV 来 描述 文章 标题 、 文 章 内 容 和 巧 克 
力图 片 等 样式 ， 这 部 分 的 关键 代码 如 下 所 示 。 


OD 人 OD- 


14. 


<! 巧克力 文化 部 分 的 div， 内 包含 多 篇 文章 - -> 

<div id="page_content_left "> 
<div class= "title"> 欢 迎 来 到 我 们 的 巧克力 工厂 ! </div> 
<div class="content_text"> 省 略 文章 的 内 容 </div> 
省 略 其 他 文章 的 编码 


</div> 
<! 巧克力 图 片 部 分 的 div - -> 
<div id="page_content_right"> 
<div class="title"> 最 新 产品 </div> 
<div class="content_text "> 最新， 最 好 吃 的 巧克力 ， 第 一 时 间 展 现在 你 面前 。</div> 


<div class="content_text"> 


省 略 巧克力 图 片 和 超 链 部 分 的 内 容 


</div> 


上 述 代 码 可 以 分 成 两 块 ， 其 中 第 2~7 行 用 嵌 套 DIV 的 方式 定义 文章 标题 、 文 章 内 容 等 样 


式 。 


在 第 1 行 的 代码 中 引用 了 page_content_left， 这 个 CSS 中 包含 了 一 个 很 不 起 眼 但 是 却 很 实 


的 属性 : 


相当 


border-right:1px #800000 dashed; ， 这 个 属性 的 意义 就 是 将 这 个 大 的 DIV 右边 框 


像素 定义 为 1 个 像素 ， 并 设置 为 虚线 (dashed 表 示 设置 具 线 ) ， 这 样 一 来 整个 页 面 在 视觉 上 就 


分 为 两 个 部 分 。 


在 content_text 的 CSS 代 码 中 ， 定 义 了 文章 的 样式 ， 比 如 字体 大 小 、 字 体 颜色 、 字 体 对 齐 
方式 和 内 边 距 ， 代 码 如 下 所 示 。 


| 
a 
3. 
4 
5 


.content_text { 
font-size:11px; <! 定义 字体 大 小 为 11 个 像素 - -> 
color:#333333; <! 定义 字体 的 颜色 - -> 
height :auto; <! 定义 字体 的 高 度 - -> 
text-align:justify; <! 定义 字体 的 对 齐 方式 - -> 
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[3 padding:8px; <! 定义 内 边 距 --> 
Fe 


而 在 第 9~14 行 的 代码 中 ， 定 义 了 巧克力 图 片 ， 我 们 来 看 一 个 其 中 图 片 实现 代码 。 


<a href="details.html"><img src="images/pic/l.jpg" width="100" 


height="100" alt="pic" title="pic" class="gallery" /></a> 


其 中 用 到 了 gallery 这 个 CSS， 它 的 关键 代码 如 下 所 示 ， 定 义 了 图 片 部 分 的 样式 。 


1. img.gallery { 

2 padding:0px; <! 定义 内 边 距 --> 

SS margin:8px; <! 定义 外 边 距 --> 

站 border :5px #FFFFFF solid; <! 定义 图 片 的 边框 和 颜色 - -> 
5 float :left; <! 定义 浮动 方式 - -> 

Soo 


搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 比较 简单 ， 包 括 两 个 部 分 的 DIV， 效 果 如 图 16-7 所 示 。 


导航 部 分 的 DV 


版 权 部 分 的 DIV 


网 
网 


16-7 页 脚 部 分 DIV 效果 


这 部 分 的 实现 代码 如 下 所 示 。 
<! 页 脚 部 分 的 DIV- -> 


1 

2. <div id="footer_content "> 
攻 <! 版 权 信息 部 分 的 DIV- -> 
4. <div id="copyrights">&copy ;巧克力 工厂 保留 一 切 权利 2010 </div> 
5 <! 导航 部 分 的 DIV- -> 
6. <div> 

<ul class="footer_menu"> 

8 <1li><ahref="index.htm" class="nav2"> 首 页 </a></1i> 


9. <1i><ahref="gallery.html" class="nav2"> 产 品 展示 </a></1i> 
10. <1i><ahref="#" class="nav2"> 关 于 我 们 </a></1i> 

届 司 <1i><ahref="contact .html" class="nav2"> 联 系 我 们 </a></1i> 
1 </ul> 

13. </div> 

14. </div> 


第 2 行 的 代码 引用 了 footer_conten 这 个 CSS， 它 定义 了 整个 页 脚 部 分 DIV 的 宽度 。 
在 第 4 行 定义 版 权 信息 的 DIV 中 ， 我 们 定义 了 了 D 为 copyrights 的 CSS， 这 部 分 的 代码 如 下 所 


不 ， 


它 定义 了 宽度 、 背 景 颜色 、 字 体 大 小 、 内 边 距 和 浮动 等 效果 。 


1. #copyrights { 
2 width:350px; <! 定义 宽度 --> 
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color: #666666; <! 定义 颜色 --> 
国 font-size:10px; <! 定义 字体 大 小 --> 
BE float :left; <! 定义 悬浮 方式 - -> 
6 . padding:10px; <! 定义 内 边 距 - -> 
Fe 
而 在 上 面 HTML 代 码 的 第 6-13 行 中 ， 定 义 了 导航 部 分 的 信息 ， 其 中 nav2 这 个 CSS 的 作用 
是 定义 鼠标 移动 到 导航 文字 上 的 效果 ， 这 部 分 的 样式 代码 将 将 在 下 文中 详细 讲述 。 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 分 析 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 首 
页 中 其 他 CSS 的 效果 ， 如 表 16-2 所 示 。 同 样 地 ， 对 于 同类 CSS 效 果 ， 我 们 将 只 分 析 一 次 。 


表 16-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


CSS 描 述 和 关键 代码 效果 图 
定义 DIV 的 背景 色 、 宽 度 和 高 度 ， 
并 设置 此 DIV 边 框 的 宽度 为 8 个 像 标 


#main_content { 


DIV 代 码 


<div id="main_content"> 


实 迎 来 到 我 们 的 巧克力 工厂 | 


width:850px; esi asp | as, ewe 
height: auto; | A 
margin:auto; ths 
background-color:#f7f2ee; Te : 
border:8px #FFFFFF solid; 
} 
<div id="page_content_ | 定义 文字 是 左 对 齐 的 
left"> #page_content_left { | 
width:400px; 欢迎 来 到 我 们 的 巧克力 工厂 | 
人 《其 果 3 
height:auto; 东南 部 的 有 着 由 
了 本 人 是 文献 上 记载 
float:left; 在 公元 前 1500 年 ,地 们 的 文化 就 已 由 黑 刀 


ee 人 种 植 出 来 的 ， 但 在 考 世 


<div class= "link_| 当 鼠标 移 开 时 ， 文 字 下 划 线 消失 


more"><a href="gallery. | .link_more a{ 


div> text-decoration:none; © 更 多 内 容 
} 
当 鼠 标 移 上 去 时 ， 文 字 会 出 现下 划 6 更 内 容 
线 


.link_more a:hover { 


text-decoration:underline; 
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16.3 ”利用 CSS 样 式 完善 首页 效果 


在 首页 中 ，CSS 代 码 的 效果 主要 体现 为 鼠标 悬浮 效果 ， 即 实现 鼠标 放 上 去 和 移 开 有 不 同 
效果 这 种 功能 。 


首页 页 头 的 CSS 效 果 


首页 页 头 上 CSS 的 效果 如 图 16-8 所 示 。 
为 了 实现 这 个 效果 ， 我 们 需要 在 DIV 中 引入 
CSS 的 ID， 代 码 如 下 所 示 。 


首页 产品 展示 关于 我 们 联系 我 们 


图 16-8 页 头 CSS 实 现 的 动态 效果 


1. <ulclass="menu"> 

2 <1i><a href="index.htm" class="nav"> 首 页 </a></1i><! 引入 nav 这 个 CSS--> 
3 <1li><ahref="gallery.html" class="nav "> 产品 展示 </a></1i> 

4. <1li><ahref="details.html" class="nav"> 关 于 我 们 </a></1i> 

5 <1i><a href="contact .html" class="nav "> 联系 我 们 </a></1i> 

6 </l> 


随后 ， 我 们 在 style.css 文 件 中 定义 这 个 效果 ， 代 码 如 下 所 示 。 


a.nav:1link, a.nav:visited {<!-- 鼠标 移 开 --> 
省 略 其 他 代码 


background:url(images/bt_bg.jpg) no-repeat left; 


| 
2 
忆 | 
4 
S00 

6. a.nav:hover {<!-- 鼠标 移 上 去 --> 
7. 省 略 其 他 代码 

8 

9 

1 


: background:url (images/bt_bg_a.jpg) no-repeat left: 
Da 

通过 上 述 的 代码 ， 我 们 定义 了 首页 导航 栏 的 样式 ， 第 1 行 定义 鼠标 移 开 的 效果 ;重点 是 
在 第 四 行 ， 当 鼠标 移 开 时 ， 这 个 超 链 的 背景 图 是 第 4 行 定义 的 bt_bgjpg， 并 且 显 示 在 这 个 超 链 
的 左边 ， 没 有 拉 伸 (其 中 ”no-repeat ”就 是 对 应 的 不 拉 伸 属性 )。 

第 6 行 定义 鼠标 移 上 去 时 的 效果 ， 重 点 是 在 第 9 行 ， 鼠 标 移 到 超 链 上 时 ， 这 个 超 链 的 背景 
图 是 第 9 行 定义 的 bt_bg_ajpg， 并 且 图 片 位 于 这 个 超 链 的 左边 ， 没 有 拉 伸 。 

从 上 面 分 析 可 以 看 出 ， 在 实现 图 片 变换 效果 的 时 候 ， 使 用 CSS 是 最 方便 的 实现 方法 。 
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LE 环 区 用 定义 首页 页 脚 的 CSS 效 果 
首页 页 脚 的 文字 需要 有 鼠标 移 上 去 变色 的 效果 ， 如 图 16-9 所 示 。 


鼠标 移 开 时 的 效果 
鼠标 移 上 去 的 效果 


图 16-9 页 脚 上 CSS 实 现 的 动态 效果 


为 了 实现 上 图 的 效果 ， 我 们 在 代码 中 引用 了 CSS， 代 码 如 下 所 示 。 


. <div> 
<ul class="footer_menu"> 
<l1li><a href="index.htm" class="nav2"> 首 页 </a></1i> 


</ul> 


1 
2 
3 
4. 
5 
6 </div> 


其 中 第 2 行 代码 引用 了 footer_menu 这 个 CSS 属 性 以 保证 导航 栏 的 行 显示 ， 这 个 CSS 属 性 在 
上 文中 已 经 介绍 过 了 ， 这 里 就 不 再 重复 说 明了 。 
然后 我 们 在 style.css 文 件 中 定义 这 个 效果 ， 其 代码 如 下 所 示 。 


1. a.nav2:1ink, a.nav2:visited {<!-- 鼠标 移 开 - -> 
2 省 略 其 他 代码 

3 

4. calor: #0999999: 

CT 

6. a.nav2:hover {<!-- 鼠标 移 上 去 - -> 

人 省 略 其 他 代码 

8 . 

9. color :#000000; 

10. } 


在 上 述 代 码 中 ， 我 们 定义 了 页 脚 的 超 链 样式 ， 代 码 的 重点 是 第 4 行 和 第 9 行 ， 当 鼠 移 开 时 
(visited) 字体 颜色 是 4999999， 当 鼠标 移 上 去 时 (hover) 字体 颜色 是 #000000。 

在 使 用 文字 超 链 时 ， 可 以 使 用 这 样 的 CSS 效 果 来 泻 染 ， 可 以 使 页 面 看 起 来 有 动态 的 效 
果 ， 并 使 页 面 看 起 来 更 加 的 丰满 。 


16.4 ”产品 列表 页 面 


在 产品 列表 页 


日 
ey 
齐 
网 


片 的 方式 展示 巧克力 ， 以 激发 起 访问 者 的 购买 欲望 ， 本 节 
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我 们 将 只 给 出 该 页 面 的 特点 ， 与 首页 相同 部 分 就 不 再 分 析 了 。 


产品 列表 页 面 分 类 部 分 的 DIV 


产品 列表 页 面 的 分 类 部 分 需要 实现 如 下 的 特 和 本 
色 : 第 一 ， 整 齐 排列 产品 展示 图 ， 这 个 可 以 通过 “和 | La 
DIV 布局 的 方式 实现 ; 第 二 ， 需 要 产品 分 类 ， 并 且 
当 鼠 标 移动 到 分 类 上 时 ， 出 现 亮 点 ， 页 面 效果 如 图 
16-10 所 示 。 
上 图 分 类 使 用 三 列 的 显示 方法 ， 每 列 都 显示 


了 四 个 分 类 ， 其 中 一 个 分 类 的 实现 代码 如 下 所 国 163101CSS 效 果 惨 未 
示 。 

1. <divclass="details"> 

2 <ul class="services"> 

疏 生 <1i><ahref="#" class="nav_services"> 黑 巧克力 </a></1i> 

4 

5 </ul> 

6: “</div> 


要 实现 其 他 三 个 分 类 的 代码 ， 同 样 的 DIV 和 同样 的 CSS 代 码 写 三 次 就 行 了 ， 这 里 为 了 节 
省 篇 幅 ， 只 给 出 一 个 分 类 的 实现 代码 。 在 实现 时 ， 通 过 第 3 行 引 用 ID 为 nav_servides 的 CSS， 


实现 小 黑 点 变 亮 这 个 效果 ，CSS 部 分 的 实现 代码 如 下 所 示 。 
1. a.nav_services:link, a.nav_services:visited {<!-- 鼠标 移 开 --> 
2 省 略 其 他 代码 
3 
4 background:url (images/bullet .png) no-repeat left; 
SS 
6. a.nav_services_a {<!-- 鼠标 移 上 去 - -> 
2 省 略 其 他 代码 
8 
: 汪 background:url (images/bullet_a.png) no-repeat left: 
10. } 


上 述 代 码 中 所 实现 的 效果 与 页 头 的 效果 是 一 样 的 ， 这 里 要 注意 的 就 是 变换 的 图 片 ， 不 能 
使 用 前 面 的 图 片 ， 而 是 改 用 这 个 小 圆 点 图 片 。 

请 大 家 关注 第 4 和 第 9 行 的 background 代 码 ， 这 两 行 引 用 的 图 片 URL 不 同 ， 但 都 采用 了 不 
拉 伸 (no-repeat) 的 样式 。 


产品 列表 页 面 产品 部 分 的 DIV 


产品 列表 页 面 产 品 部 分 可 以 说 是 网 站 的 精华 所 在 ， 它 使 用 了 精美 的 巧克力 图 片 ， 吸 引 住 
访问 者 ， 这 部 分 的 效果 如 图 16-11 所 示 。 
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EE 二 


- 


夺 主 加 其 加 


5-x@ 


图 16-11 产品 列表 页 面 图 片 展示 效果 


实现 这 个 效果 的 关键 代码 如 下 所 示 。 


1. <divclass="content_text "> 

2 <ahref="details.html"> 

3 <img src="images/pic/l1l.jpg" width="100" height="100" alt="pic" 
title="pic" class="gallery" /> 

4. </a> 

3 

6. </div> 


产品 列表 中 图 片 能 够 自动 换 
中 引用 的 CSS， 实 现 效果 代码 如 下 所 示 。 


行 并 且 排 列 整齐 主要 就 在 于 <div class= ”content_text ”> 语句 


1. .content_text { 

和 text-align:justify:;<!-- 两 端 对 齐 --> 

在 上 述 代 码 中 ， 第 3 行 定义 图 片 对 齐 显示 的 关键 ， 它 的 作用 就 是 使 图 片 自动 对 齐 并 换 
行 。 而 图 片 出 现 的 相框 效果 则 是 由 以 下 CSS 代 码 实现 的 。 

1. img.gallery { 

border :5px #FFFFFF solid; <!-- 图 片 边框 为 5 像素 ,边框 颜色 为 白色 - -> 

5 ) 

在 上 面 代码 的 第 3 行 里 ， 通 过 指定 border 宽 度 为 5 个 像素 的 方式 ， 实 现 了 相框 的 效果 。 如 
果 日 后 要 使 相框 变 粗 ， 或 者 是 采用 其 他 的 颜色 ， 可 以 通过 修改 上 面 第 3 行 的 代码 实现 。 


16.5 ”产品 详细 页 面 


产品 详细 页 面 是 比较 简 六 


的 页 面 ， 我 们 就 不 做 详细 分 析 了 ， 下 面 简单 介绍 一 下 这 个 页 面 。 


这 个 页 面 其 实 与 首页 相差 不 多 ， 它 们 都 有 一 样 的 导航 痢 


第 16 章 ”美观 的 巧克力 网 站 设计 


部 分 和 页 脚 部 分 ， 我 们 直接 来 看 这 


力行 风光 人 
3 人 
务 ， 国力 时。 不 断 忧 化 ,持续 以 强势 的 


。 3 
3 面向 饮食 业内 外 提 贷 全 方位 饮 全 守 讯 服 
Vs 序 发展 ,不断 基 化 ， 持 污 以 强势 的 


9 花 式 巧克力 。 9 巧 克 力 委 糙 
和 9 白 巧克力 和 酒 心 巧克力 。。 章 巧克力 侈 品 
和 动物 巧克力 。。 全 巧克力 软 糖 

和 DY 巧 克 力 全 热 巧 克 力 


和 5 办 一 有 人 习惯 新 玫 入 S05 视力 ， 本 可 亚 生 量 不 低 于 55% ,人治 旺 _ 


图 16-12 产品 详细 页 面 
可 以 看 出 ， 这 个 产品 详细 页 


片 展示 效果 


就 是 由 一 个 大 的 DIV 和 里 面 的 两 个 小 DIV 组 合 


它 的 组 合 方式 与 网 站 首页 的 组 合 方式 是 一 样 的 。 
要 注意 的 是 ， 左 边 DIV 上 面部 分 就 是 一 张 


所 以 选 图 的 时 候 一 定 要 注意 ， 不 能 选 过 


片 的 失真 或 拉 伸 ， 影 


页 面 的 美观 。 
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Ce AR 
wWv 三 国 杀 : S 


桌面 游戏 也 叫 “ 不 插 电 ”游戏 ， 是 一 种 面对面 的 游戏 ， 非 常 强调 玩家 之 
间 的 交流 ， 因 此 ， 桌 面 游戏 是 家 庭 休 闲 、 朋 友 聚 会 、 甚 至 商务 闲暇 等 多 种 场 
合 的 最 佳 沟通 方式 。 三 国 杀 是 桌面 游戏 里 的 一 种 ， 当 前 非常 火爆 ， 本 章 将 要 
分 析 一 个 综合 介绍 三 国 杀 的 游戏 网 站 。 

这 个 网 站 包含 了 游戏 网 站 的 大 多 数 要 素 ， 通 过 修改 ， 本 网 站 能 轻易 地 变 
化 成 包含 游戏 介绍 、 游 戏 攻略 、 游 戏 主题 活动 等 内 容 的 游戏 主题 网 站 。 


17.1 ”网 站 页 面 效果 分 析 


本 网 站 主要 介绍 三 国 杀 游戏 ， 它 包含 了 三 国 杀 游戏 介绍 
杀 主 题 活动 ”等 游戏 相关 的 信息 内 容 。 


| 
加 


杀 攻 略 和 三 国 


为 了 更 好 地 吸引 访问 者 ， 这 个 网 站 需要 用 足够 的 图 片 来 点 级 


互动 ”功能 区 ， 通 过 玩家 发 表 的 文章 和 图 片 ， 增 加 网 站 的 吸引 力 。 


网 页 ， 而 且 需 要 开设 ”玩家 


在 本 章 中 ， 将 着 重 分 析 “三 国 杀 游 戏 首页 和 三 国 杀 卡 牌 介绍 ”页面 的 设计 样式 ,而 
第 三 个 ”玩家 风采 页 面 ， 它 的 风格 和 前 两 个 页 面 非常 相似 ， 所 以 就 不 再 分 析 了 。 


首页 效果 分 析 


壁纸 下 载 区 和 玩家 讨论 区 等 内 容 。 


三 国 杀 游戏 网 站 的 首页 包含 比较 多 的 要 素 ， 包 括 ”游戏 攻略 区 、 游戏 视频 


网 
区 


这 里 我 们 采用 四 行 的 设计 样式 。 在 第 一 行 里 ， 放 置 网 站 Logo 图 标 、 导 航 菜单 和 搜索 模 


三 行 是 本 网 站 的 主体 ， 其 中 用 了 多 个 DIV， 放 置 ”玩家 视频 、 
区 等 内 容 。 而 在 最 后 一 行 里 ， 将 放置 页 脚 的 导航 菜单 。 


块 。 在 第 二 行 里 ， 放 置 本 网 站 的 主题 图 片 ， 这 里 可 以 放 广告 ， 也 可 以 放置 本 网 站 的 招牌 。 第 


游戏 攻略 和 ”玩家 讨论 


页 的 样式 如 图 17-1 所 示 ， 总 体 上 ， 用 色彩 协调 搭配 一 些 


图 片 ， 加 上 丰富 的 介绍 性 文 


字 ， 突 出 网 站 的 特点 。 
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- EB 
如 
LTT = 国 wr- 因 xxs| 因 


> 扩充 第 1 弹 


隐 诊 
EXPANSIONRE 
ie 


Re | 


贺 玩家 讨论 区 ES 
人 Ri 有。 挨家 心得。 尖 体 报道 活动 新 闻 游戏 公告 


2010/4/15 于 痪 世界 的 二 度 拓 展 


2010/4/15 
2010/4/15 

2010/4/15 

201014/9 Em 

2010/4/9 起 栖 外 传 首 外 之 XXX 回 一 余生 柜 出 题 难 展 生 , 法 央 
20101419 竺 马 中 西风 

2010/479 长 白地 的 志 事 

z010/4/9 执 开 喜事 经 去 ， 还 原 历 记 相 

2010/4/9 三 国 六 析 


» ES 


mm 和 ENR 全 63 布 » Ms] 


图 17-1 首页 的 效果 


四 
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三 国 杀 卡 牌 介绍 页 面 的 效果 分 析 


在 这 个 游戏 网 站 中 ， 包 含 很 多 介绍 性 的 文字 ， 比 如 介绍 规则 、 三 国 杀 的 卡 牌 或 者 游戏 攻略 。 
这 里 我 们 通过 三 国 杀 卡 牌 介绍 页 面 ， 来 说 明 本 网 站 中 ”信息 介绍 类 网 页 的 布局 方式 。 
这 个 页 面 采 用 三 行 样式 ， 其 中 ， 第 一 行 的 页 头 和 第 三 行 的 页 脚 样式 与 首页 是 完全 一 致 
的 。 而 在 第 二 行 里 ， 放 置 的 是 本 页 面 的 主体 内 容 ， 即 卡 牌 介绍 页 面 ， 这 个 页 面 主体 部 分 的 样 
式 如 图 17-2 所 示 ， 与 首页 完全 相同 的 页 头 页 脚 我们 就 不 再 展示 。 


基本 卡 牌 介绍 


扰 隆 介绍 武将 卡 牌 介绍 
Es 页 标 形式 的 导航 医 


其 他 卡片 介绍 


Sag 


用 :1 在 你 的 出 
2 当 有 角色 处 于 副 开 


当 你 委 到 【 订 】 的 攻击 时 ， 你 可 以 使 用 一 张 【 四 】 玫 我 消 【 杀 】 
的 效果 。 


下 虽 能 在 辐 全 


本 
外 合用 或 打出 

上 a 

办 为 2 点 ， 此 时 并 到 【办 电 】 侍 力 ,你 不 可 以 对 自己 合用 上 上 玩法 

| 计 或 的 【机 】， 


图 17-2 卡 牌 介绍 页 面 的 效果 图 


人 LE 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 images、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 17-1 所 示 。 


表 17-1 电影 网 站 文件 和 目录 一 览 表 


网 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
category.htm | 描述 三 国 杀 卡 牌 目录 的 页 面 
incheaderhtml | 描述 三 国 杀 卡 牌 目 录 的 页 面 
styles 目 录 之 下 所 有 扩展 名 为 css 的 文件 | 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 | 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 之 下 所 有 的 图 片 | 本 网 站 需要 用 到 的 图 片 
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首页 
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17.2 ”规划 首页 的 布局 


包含 的 文字 图 片 比较 多 ， 虽 然 使 用 了 四 行 布局 方式 ， 但 也 是 要 细致 地 规划 一 下 ， 


本 节 我 们 主 


E 要 分 析 首 页 中 许多 重要 DIV 的 实现 方式 。 


搭建 首页 页 头 的 DIV 


首页 的 页 头 部 分 ， 包 含 了 Logo 图 标 、 导 航 菜单 和 搜索 模块 三 大 部 分 ， 效 果 如 图 17-3 所 


| 


17-3 首页 页 头 的 DIV 设计 | 


实现 页 头 部 分 的 关键 代码 如 下 所 示 。 


1. <div id="header "class="grandtop "> 

2 <div class="clearfix"> 

多 二 <hl class="1logo"><ahref="#"> <!---Logo 图 片 -> 
4. <img src=" images/header/logo.jpg" "width="198" height="103" /></a> 
3 </hl> 

5 轴 <div class="sub "> 

Te <ul class="clearfix"> 

:二 <1i> 

9 . 省 略 搜索 部 分 的 代码 

10 </1i> 

ti </ul> 

U2 </div> 

13- <div class="gnav "> 

14 . <ul class= "clearfix "> 

TS <! 这 里 是 一 个 导航 图 片 - -> 

16 . <1i><ahref="index.html "> 

1 <img src=" images/gnav/game_def .gif" width="130" height="50"/> 
18: </a> 

L192 < 

20. 省 略 其 他 导航 图 片 

21 </ul> 

2 </div> 

23. ‘</div> 

24. </div> 


在 上 述 代 码 的 第 3 行 里 ， 放 置 了 页 头 的 Logo 图 片 ， 在 第 6~12 行 里 ， 个 DIV 定 义 了 搜 
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索 模块 ”的 效果 ， 在 第 13~19 行 ， 定 义 了 一 个 图 片 格式 的 导航 菜单 ， 在 页 头 上 ， 有 4 个 图 片 形 
式 的 导航 菜单 ， 由 于 代码 与 第 一 个 导航 菜单 代码 非常 相似 ， 所 以 就 不 再 重复 贴 出 。 

在 上 述 代码 第 3 行 里 ， 定 义 了 Logo 图 标的 样式 、 悬 浮 方式 和 宽度 ， 这 部 分 的 关键 代码 如 
下 所 示 。 


#header hl .logo, 
#header p. logo{ 

float :left; // 定 义 悬 浮 方向 
width:180px; // 定 义 宽度 


在 第 13 行 里 ， 我 们 定义 了 图 片 格式 导航 菜单 的 样式 gnav， 每 个 CSS 定 义 了 图 片 导航 菜 
对 齐 的 ， 关 键 代码 如 下 所 示 。 


J 
2 
3 
4. 
5 
6. } 
而 
右 


三 
十 


|m 


1. #header div.gnav{ 

2 float :right ; // 定 义 悬 浮 方向 

3 width:670px; // 定 义 宽度 

4 

5. #header div.gnavul{ 

6. float :right ; // 定 义 悬 浮 方向 
padding-right:10px; // 定 义 页 内 边 距 
ee: 


示 区 域 DIV 


图 片区 域 不 仅 可 以 放 广告 ， 也 可 以 放置 能 体现 网 站 风格 的 、 三 国 杀 游 戏 的 图 片 ， 这 部 分 
的 代码 非常 简单 ， 它 通过 DIV 里 图 片 的 宽度 和 高 度 ， 定 义 图 片 的 大 小 ， 代 码 如 下 所 示 。 
比较 简单 ， 所 以 这 部 分 就 不 给 出 截图 了 。 


1. <div> 

2 <ahref="index.html" target="_blank"> 

3 <img src=" images/img4.jpg" width="950" height="280" /> 
4 </a> 

5 </div> 


搭建 ”玩家 视频 “部 分 的 DIV 


在 首页 中 ， 除 了 使 用 图 片 ， 还 能 使 用 视频 的 方式 播放 动态 的 效果 ， 这 部 分 的 效果 如 图 
17-4 所 示 ， 它 的 样式 是 用 一 个 大 的 DIV 套 若干 个 小 的 DIV。 
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| = 本 第 八 居 三 国 杀 。 加 国王 三 国 杀 最 新 裤 
国 杀 主题 曲 王者 之 战 充 包 上 市 
OP 


图 17-4 玩家 视频 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 。 

1. <div id="mainArea "> 

<h2 class="hImg "> 

3 <! 定义 玩家 视频 的 图 片 - -> 

4 <img src=" images/h2_pickup.gif" width="700" height="33" /> 

5 </h2> 

6 <div class=" index05"> 

全 <ul> 

8 <li><ahref="#" target="_blank"> 

9 <img src=" images/pickup/thumb01 .jpg" alt="" width="100" height="71" 
> 

10: <div> 

La <p><img src=" images/pickup/tt101 .gif" /></p> 

12 </div> 

3 </a></1i> 

14. 省 略 定义 

LS </ul> 


16. </div> 


这 里 使 用 图 片 显示 所 有 的 文字 效果 ， 在 第 4 行 里 放置 了 显示 ”玩家 视频 文字 的 图 片 ， 
从 第 7~15 行 ， 使 用 ul 和 上 i 的 方式 定义 了 视频 图 片 。 

请 注意 在 包含 视频 图 片 的 第 6 行 的 DIV 里 ， 引 入 了 ID 为 index05 的 CSS 样 式 ， 它 的 关键 代码 
如 下 所 示 ， 它 不 仅 定义 了 DIV 的 宽度 ， 还 定义 了 这 个 DIV 外 边框 的 一 些 属性 。 


1. #mainAreadiv.indexO5ul 1if 

2 width:220px; // 定 义 宽度 

3 

4. vertical-align:top; // 将 元 素 的 行内 框 的 项 端 与 行 框 的 顶端 对 齐 
5 margin-bottom:20px; // 设 置 这 个 DIV 的 下 外 边 距 

6 margin- 1eft :20px; // 设 置 这 个 DIV 的 左 外 边 距 

jo 


搭建 ”游戏 攻略 “部 分 的 DIV 


在 游戏 攻略 ”部 分 的 DIV 中 ， 放 置 一 些 热门 攻略 的 标题 ， 是 一 个 图 片 带 文字 部 分 的 效 
果 ， 如 图 17-5 所 示 。 
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图 17-5 玩家 攻略 部 分 的 DIV 


这 部 分 的 关键 代码 如 下 所 示 。 


1. <divid="rightArea> 

2 <pclass="newsBtn"><a href="#"> 

3 <! 放置 攻略 抬头 图 片 - -> 

4. <img src="images/rightarea/btn/news_new_def .gif" width="210" 
height="35" /> 


三 </a></p> 

6 <div id="funclubArea"> 

ee <ul> 

8. <li isimg="false"> 

9. <atitle=" 攻 略 标题 " href="#"”target="_blank"> 攻 略 标题 </a></1i> 
Os </ul> 

加 </div> 


其 中 ， 在 第 4 行 里 ， 用 图 片 的 方式 定义 攻略 的 抬头 图 片 ， 而 在 第 9 行 里 ， 用 i 的 方式 定义 


攻略 的 标题 。 在 第 2 行 里 ， 用 newsBnt 的 CSS， 定义 了 NEW 这 个 按钮 的 宽度 ， 代 码 如 下 所 
示 。 

1. #rightAreap.newsBtn{ 

2 width:210px; // 定 义 宽度 

二 


而 在 第 6 行 里 ， 通 过 funclubArea， 定 义 这 个 DIV 的 外 部 底 端 边 距 是 10 个 像素 ，funclubArea 
的 代码 如 下 所 示 。 
1. #rightArea#funclubArea{ 


2 margin-bottom: 10px; 
< 


搭建 ”玩家 讨论 区 “部 分 的 DIV 


在 首页 中 ， 需 要 使 用 一 定 的 篇 幅 ， 显 示 玩 家 对 三 国 杀 游戏 的 评论 和 留言 ， 这 部 分 的 样式 
如 图 17-6 所 示 。 
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加 砚 衣 讨 认 区 二 [87 


全 新 闻 攻 畏 心得 te 玩家 心得 。 媒体 报道 笑 动 新 闻 游戏 公告 
三 之 七 计生 


2010/4/15 

2010/4/15 直 乔 日 记 之 长 相思 

2010/4/15 寻找 好 组 

2010/4/9 本 -2 

2010/4/9 外 传 关外 之 XXX 回 一 一 作 2 凑 膨 云 引 众 《三 国 杀 》 
2010/4/9 第 马 哺 西 风 

2010/4/9 长 坂 坡 的 赦 事 


2010/4/9 热 开 故事 感 云 ， 还 原 历史 真相 一 一 宣 折 之 死 
2010/4/9 三 国 杀 浅 析 


更 多 


图 17-6 玩家 讨论 区 的 DIV 效果 图 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 从 第 4~7 行 的 位 置 ， 用 ul 和 1i 的 方式 设置 多 个 分 页 标 
而 从 第 10 行 开始 ， 用 table 的 方式 放置 每 一 个 帖子 。 


<div class="section"> 


<div class= "tabIndex” id="newsTabIndex "> 
<! 设置 分 类 页 签 - -> 
<ul class= "tab tabs-nav "> 
<1i><ahref="#tabCA11" class="tabAl1"><span> 全 部 </span></a></1i> 
省 略 其 他 1i 格 式 的 页 签 
</ul> 
<div class="tabs-container" id="tabCA11"> 
<div class="newsList"> 
<table border="1" cellspacing="0"> 
<tbody> 
<! 讨论 区 里 的 一 个 --> 
<tr class="first"> 
<th>2010/4/15</th> 
<th>&nbsp;</th> 
<td><a href="index.html" target="_blank"> 
平衡 世界 的 二 度 拓 展 </a></td> 
SHEF 
<! 省 略 其 他 帖子 - -> 
</tbody> 
</table> 
</div> 
<pP class="more"><ahref="#"> 更 多 </a></p> 
</div> 


2 
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搭建 ”壁纸 下 载 。_ 等 部 分 的 DIV 


在 首页 中 ， 有 ”壁纸 下 载 、 经典 战 局 和 ”风靡 三 国 杀 ”三 部 分 的 主题 区 域 ， 这 三 
部 分 的 风格 与 ”玩家 视频 ”部 分 非常 相似 ， 下 面 是 效果 图 ， 如 图 17-7 所 示 。 


罗 登 约 下 未 园 经 由 战局 ” 记 ] 风靡 三 国 孙 
王者 之 起 
1 E 
三 国 杀 于 者 之 战 三 国 闲 宜 舍 Wy 
,EE "了 ,Eg 


图 17-7 三 大 主题 区 的 效果 图 


在 首页 的 右边 ， 放 置 着 若干 个 壁纸 下 载 模块 ， 这 个 模块 的 样式 其 实 也 是 一 个 大 DIV 
套 诸多 小 DIV， 效 果 如 图 17-7 所 示 。 这 部 分 的 关键 代码 如 下 所 示 ， 它 定义 了 ”壁纸 下 载 部 
分 的 页 面 效果 ， 而 另外 两 个 主题 模块 由 于 代码 样式 很 接近 ， 这 里 就 不 再 重复 分 析 了 。 


1. <divclass= "join"> 

<h2 class="hImg"><a href="#/"> 

3 <img src=" images/h2_join.gif" width="340" height="36" /></a></h2> 

4 <div class="index02"> 

5 <ul> 

6 <1i> 

7 <div> 

: <divalign="center"><ahref="#" target="_blank"> 

9. <img src="images/thumb_join01.jpg” alt="" width="160" 
nerent= 3 /> 

Tos <span> 诸 葛 亮 </span> </a> </div> 

Ds </div> 

Ls </1i> 

[区 <1i> 

14. <div> 

15: <divalign="center"><ahref="#" target="_blank"><img src="images/ 
thumb_join02.jpg" alt="" width="160" height="113" /> 周瑜 </a> </div> 

16s </div> 

IY eALL> 

18 . </ul> 

195 <P class="more"> <ahref="#"> 更 多 </a> </p> 

20 . </div> 

213 </div> 


223 省 略 ”经 典 战局 "和 ”风靡 三 国 杀 "部 分 的 主题 模块 


il 第]7 章 火爆 的 三 国 杀 桌面 游戏 网 站 


8 搭建 页 脚 部 分 的 DIV 
这 个 网 站 的 页 脚 部 分 比较 传统 ， 它 放置 了 一 些 导 航 信息 ， 效 果 如 图 17-8 所 示 。 


页 脚 部 分 ， 显 示 导 航 菜单 
更 多 基本 卡 介 绍 


上 EN » 关于 委 们 上 渤 当 条 禾 。。。， 合作 要 + 规则 和 则 说 胃 。。，》 全 国门 证 分 上 RR 


图 17-8 页 脚 部 分 的 DIV 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 代 码 比 较 简 单 ， 这 里 就 不 再 分 析 了 。 


1. <div id="footer"> 

全 <div class="fPad clearfix"> 

3 <ul> 

4 <! 回 到 首页 部 分 的 导航 菜单 - -> 

5. <1i> 

6 <ahref="index.html "> 

这 <img src=" images/footer/btn_shop.gif" width="82" height="38" /> 
3 </a> 

9. </1i> 

OE <! 省 略 其 他 内 容 ， 比 如 关于 我 们 ， 法 律 条 款 部 分 的 导航 菜单 - -> 
ds </div> 

12. </div> 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 
页 中 其 他 CSS 的 效果 ， 如 表 17-2 所 示 。 


表 17-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div class="clearfix"> 定义 了 在 此 DIV 中 导航 栏 不 会 
出 现 换行 


.Clearfix{ 
display:inline-table; 


Ee 

定义 了 导航 栏 的 图 片 = 

Ee 

min-height:1%; 

} 

定义 DIV 中 的 文字 自动 对 齐 
#rightArea ul li:after{ 


<div id="funclubArea"> 


content: . ，; 


display:block: 
| =。 定义 了 文字 
visibility:hidden; 
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<h2 class="hImg"> 


<p class="more"> 


定义 此 图 片 与 各 边 距 的 距离 
#mainArea hl.hImg{ 
margin-top:-4px; 


_margin-top:0; 


padding-top:0; 


background:none; 


定义 了 可 多 次 重复 使 用 的 小 
标 CSS (三 角 小 箭头 ) 


p.more af 


图 


background:url(../ 
images/icn_r.gif) no-repeat 0 
0.4em; 

padding-left:10px; 

margin-left:20px; 


( 续 表 ) 
DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class="index05"> ”| 定义 了 DIV 中 的 图 片 每 3 个 便 自 
动 换行 
#mainArea div.index05 ul li{ 
width:220px; 
display:-moz-inline- 
box; 卡 潭 类 三 国 负 
display:inline-block; Sr 
/display:inline; -一 
/zoom:1; 
vertical-align:top; 
margin-bottom:20px; 
margin-left:20px; 
} 


， 更 多 * 更 多 


更 多 


重复 使 用 CSS 


} 
<a href="#tabCGame" | 鼠标 停留 与 离开 使 标签 显示 不 
class="tabGame"> 同 的 效果 
#mainArea div.tabIndex ul.tab li 
atabGamef{ 
width:74px; 


background:url(../ 
images/game.gi no-repeat: 
} 
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( 续 表 ) 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div id="footer "> 定义 页 脚 的 背景 图 并 横向 拉 什 
#footer{ 


position:absolute; 
url(../images/bg. 
repeat-x; 


text-align:center; 


gif) 脚背 景 图 片 


在 首页 的 ”玩家 讨论 


17.3 


中 ， 如 图 17-9 所 示 。 


我 们 先 来 看 一 下 分 类 导航 条 商 


1 
到 
3. 
4. 
5 
6 
区 


沁 、 
月 


i 


然 


首页 讨论 


风 
nn 


贺 殉 家 讨论 区 


2010/4/15 


2010/4/15 


2010/3/15 


2010/3/12 


2010/3/5 


中 上 和 及 三国 杀 3W3 上 海地 区 官方 首 总 赛 报名 公 闪 | 能 进入 到 对 应 分 类 页 面 


2010, 


Ph， 访 问 者 能 通过 单 击 分 类 的 链接 ， 进 入 到 对 应 的 主题 页 理 


区 部 分 的 链接 效果 


单 击 后 样式 改变 ， 单 击 后 


由 海地 区 首届 六 卡 彼 游 官 方 《 三 图 杀 》 正 式 比赛 即 格 在 本 月 点 燃料 炎 


上 海 及 周边 地 区 《三 国 杀 》 专 业 款 判 培训 第 二 期 开始 报名 


图 17-9 玩家 讨论 


<ul class="tab tabs-nav"> 
<! 导航 菜单 ， 这 里 导航 到 tabA11--> 
<1li><ahref="#tabCAl1" class="tabAl1"><span> 全 部 </span></a></1i> 
<! 导航 菜单 ， 这 里 导航 到 tabCGame- -> 
<li><a href="#tabCGame" class="tabGame"><span> 新 闻 </span></a></1i> 


省 略 其 他 导航 菜单 


</ul> 


区 部 分 的 导航 效果 


部 分 的 关键 代码 ， 代 码 如 下 所 示 。 


注意 第 3 行 的 位 置 ， 是 用 #tabCall 的 方式 定义 导航 的 目标 链接 。 


后 再 关注 一 下 目标 部 分 的 代码 ， 其 中 放置 了 该 类 主题 下 的 讨论 文章 ， 代 码 如 下 所 示 。 
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1. <div id="tabCGame" class="tabs-hide tabs-container"> <! 请 注意 这 里 的 
tabCGame--> 


2 <div class="newsList"> 

3 <table border="1" cellspacing="0"> 
4. <tbody> 

加 <tr class="first"> 

6 <th>2010/4/15</th> 

F <th>&nbsp;</th> 

8. <td> 

9. <a href="#">《 三 国 杀 0L》 玩 家 问卷 调查 ， 丰 厚 奖励 等 你 拿 ! </a></td> 
a </tr> 

而 让 省 略 其 他 的 讨论 文字 

D2 </tbody> 

[红酒 </table> 

14. </div> 


请 注意 上 面 代码 的 第 1 行 ， 使 用 了 ID 为 tabCGame 的 CSS， 这 和 上 文中 对 应 的 导航 链接 是 
一 致 的 ， 因 此 能 实现 导航 效果 。 


17.4” 卡 牌 介绍 页 面 


卡 牌 介绍 页 面 使 用 图 片 加 文字 的 方式 展示 一 些 卡 牌 ， 让 网 友 对 三 国 杀 游戏 有 更 详细 了 
解 。 本 节 我 们 将 只 给 出 该 页 面 的 特点 ， 与 首页 相同 部 分 就 不 再 说 明 。 


全 有明 卡 牌 介 绍 页 面 标签 卡 部 分 的 DIV 


标签 卡 部 分 需要 重点 展示 的 当然 就 是 当前 标签 卡 ， 所 以 其 颜色 与 其 他 标签 卡 会 有 所 不 
同 ， 如 图 17-10 所 示 。 


天 本 卡 牌 介绍 道具 卡 牌 介绍 武将 卡 牌 介绍 
四 FR 7 EFF 当前 使 用 标签 卡 的 颜 


图 17-10 标签 卡 部 分 的 DIV 效果 展示 


在 上 图 中 ， 使 用 了 不 同 的 图 片 展示 出 了 这 一 效果 ， 实 现代 码 比 较 简单 ， 这 里 就 不 再 做 详 
细 说 明了 。 
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卡 牌 介 绍 页 面 左边 部 分 的 DIV 


卡 牌 页 面 左边 部 分 的 DIV 其 实 就 是 由 一 个 DIV 里 
嵌 套 了 一 个 ul 组 成 的 ， 由 于 外 围 部 分 比较 简单 ， 下 面 
就 直接 介绍 嵌 套 的 内 容 ， 如 图 17-11 所 示 。 
上 图 中 ， 主 要 样式 便 是 这 嵌 套 的 ulu 了 ， 其 代码 如 
下 所 示 。 

这 个 嵌 套 的 ul 使 得 图 框 中 的 字体 自动 排列 ， 而 在 
这 个 效果 的 左边 其 他 部 分 中 ， 其 样式 与 上 面相 同 这 里 
就 不 再 做 详细 说 明了 。 

1. <ulclass="inlineList clearfix"> 


yn <1li><a href="#" class="1inkRight "> 友 例 
如 ， 一 名 角 </a></1i> 


3. <li><a href="#" class= linkRight "> 女 出 
牌 阶段 ， 若 </as<r i> 
4. </ul> 


卡 牌 介绍 页 面 右 边 部 分 的 DIV 


卡 牌 介绍 页 面 右边 部 分 其 实 是 分 成 两 部 分 的 ， 但 
是 由 于 比较 简单 ， 这 里 就 一 次 介绍 完 吧 ， 其 效果 如 图 
17-12 所 示 。 

从 图 中 可 以 看 出 ， 右 边 部 分 的 样式 比较 简单 ， 它 
上 下 两 部 分 组 成 的 ， 并 且 没 有 什么 需要 特别 注意 的 
地 方 ， 这 里 就 不 再 做 详细 分 析 了 。 


图 17-11 庶 套 ul 效果 展示 


其 他 卡片 介绍 


us 


图 17-12 活动 右边 部 分 展示 效果 
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AS 
布局 经 典 的 设计 公司 
网 站 


通过 网 站 ， 公 司 能 向 客户 展示 公司 的 形象 ， 作 为 以 设计 为 主要 业务 的 设 
计 公司 ， 更 需要 通过 网 站 ， 向 客户 展示 公司 强大 的 设计 能 力 和 多 种 多 样 的 设 
计 理 念 。 

这 类 公司 网 站 的 功能 未 必要 很 复杂 ， 也 未 必要 有 太 多 的 文字 叙述 ， 但 一 
定 要 有 如 下 的 要 素 : 第 一 是 通过 精美 的 设计 案例 ， 来 向 客户 展示 公司 强大 的 
实力 ， 第 二 是 要 通过 文字 和 图 片 展示 公司 的 经 营 范围 。 当 然 ， 公 司 的 联系 方 
式 也 是 必 不 可 少 的 。 下 面 ， 我 们 就 来 分 析 一 下 这 类 网 站 的 实现 方式 。 


18.1 网 站 页 面 效果 分 析 


在 本 章 中 ， 将 着 重 分 析 设计 公司 网 站 的 首页 和 ”设计 理念 ”页 面 的 设计 样式 ， 而 ”作品 
展示 “页面 风格 比较 简单 ， 所 以 就 不 再 说 明了 。 


3 首页 效果 分 析 
设计 公司 网 站 的 首页 布局 是 非常 经 典 的 ， 它 采用 了 四 行 的 样式 ， 其 中 ， 第 一 行 里 放置 
关于 我 们 ， 首页 等 导航 条 和 Logo 图 片 。 第 二 行 里 ， 放 置 企业 简介 的 部 分 内 容 ， 让 济 
览 者 刚 进入 网 站 就 对 企业 有 个 大 致 的 了 解 。 在 第 三 行 里 ， 放 置 网 站 的 “成功 案 例 、 ”我们 


的 观点 、 ”我 们 的 设计 理念 ”三 个 部 分 内 容 。 在 第 四 行 里 放置 的 就 是 部 分 导航 和 版 权 相 关 
信息 。 
由 于 首页 的 篇 幅 较 长 ， 所 以 我 们 通过 两 个 图 来 展示 整体 样式 ， 在 图 18-1 中 ,展示 了 上 半 
部 分 前 2 行 的 样式 ， 而 在 图 18-2 中 ， 展 示 了 后 2 行 的 效果 。 
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天 了 我 们 未 我 闪 司 障 利 


让 市 场 开 莉 厂 兴 合作 


创意 设计 公司 

说 设计 有 限 公司 娩 人 于 2009 年 ， 由 经验 丰富 创意 玫 到 、 团 结 协作 的 第 设计 全 所 姐 成 

的 专业 设计 公司 。 自 癌 设 计 为 客户 提供 全 面 专业 的 品 48 形 介质 旭 、 古 声 扒 六、 网 站 建设 平面 视 
芭 形 梨 、 包 装 设 计 ， 尾 匠 印 串 、 展 示 守 辣 设计 的 服务 - 


冰球 三 尺 非 一 日 之 塞 好 的 设计 总 能 等 揪心 灵 
创意 坚持 为 客户 提供 具有 前 瞪 性 、 高 品 对 的 设计 服务 ， 在 中 国 的 本 士 市 场 中 融入 国际 视野 ， 以 
提升 形象 力 秋 助 客户 制胜 市 场 的 过 程 中 融入 人 文 关怀 和 社会 责任 。 使 设计 成 为 企业 


图 18-1 首页 前 2 行 的 效果 图 


优秀 网 站 案例 们 的 设计 理念 


我 们 把 艺术 的 灵感 ， 以 创意 性 的 "思维 、 触 感 ' 自 壮 出 与 市 场 相 结 合 时 四 有 
佳 切合 点 ， 专 业 地 实现 企业 品牌 文化 的 提升 ， 创 造 出 侣 心 的 视觉 文化 


我 们 的 观点 


思路 决定 出 路 ， 观 仿 胜 过 经 验 思路 决定 出 路 ， 观 念 性 过 经 
验 ， 企 业 的 竞争 不 是 别 的 ， 而 是 思维 与 观念 的 竞争 。 我 们 把 
艺术 的 灵感 ， 以 创意 性 的 "思维 、 触 感 ' 创 褒 出 与 市 场 相 结合 
时 的 最 佳 切合 点 , 全面 整体 专业 地 实现 企业 品牌 文化 的 提 
升 ， 的 千 出 


创新 用 万物 成 长 之 前 艺 不 盛开 的 花 休 ,决定 有 了 营养 吸 收 ， 阳 光 的 昭 
射 ， 才 能 开放 美丽 的 花朵 儿 。 我 往生 于 艺术 ， 因 无 私 的 风沙 ， 的 当 古 人 
云 : "一 屋 不 扫 ， 何 以 扫 天 下 ? "如果 连日 常 小 事 都 做 不 好 ， 谁 全 放心 格 大 
事 交 结 你 


Es 


创意 转化 为 生产 力 

物质 需求 为 主要 消费 需求 的 时 代 已 渐 远 去 ， 我 们 的 社会 
正在 发 生 闲 交 的 变化 ， 人 们 对 精神 的 需求 大 大 超越 对 物 
盾 的 需求 ， 为 此 ， 我 们 把 更 才 目 光 的 焦点 集中 到 商品 的 
设计 表现 上 。 当 下 ， 与 其 说 绚丽 商品 大 行 其 道 ， 不 如 说 
是 商业 设计 百花 齐 放 。 忧 秀 设 ， 

Ma. 


血 趾 措 设 计 是 一 种 凑合 的 服务 方式 

策略 型 设 计 是 一 种 综合 的 服务 方式 ， 对 服务 方 来 说 , 设 
计 趟 再 是 单独 的 一 项 作业 ,而 是 更 多 其 它 部 门 参与 和 整 
合 的 结果 建立 在 资讯 -市场 -分 析 -- 定 位 -反映 的 整体 模式 
上 的 。 

第 略 型 设计 不 再 单纯 的 是 某 个 创意 的 执行 ， 或 者 是 某 系 
列 项 目 中 的 一 环 ， 而 是 参与 项 目的 探讨 论证 ， 充 分 运用 
设计 者 长 为 企业 树立 良好 形象 服务 。 重 提 视 觉 的 重要 
性 ， 是 因为 在 第 划 | 现在 满 天 下 的 时 代 ， 人 们 又 再 次 忽略 
了 产品 的 视觉 形象 、 企 业 的 整 件 形象 。 仿 佛 产 品 职 得 市 
场 的 成 功 充 妈 是 因为 第 炸 的 大 创意 ， 从 而 忽视 了 其 它 
因素 . 

二 二 


性 么 是 用 户 体 验 了 

用 户 体验 是 一 种 纯 主 观 的 在 用 户 使 用 一 个 产品 ( 服务 
的 过 程 中 建立 起 来 的 心理 感受 。 因 为 它 是 纯 主 观 的 ， 就 
斋 有 一 定 的 不 确定 因素 。 个 体 莽 异 也 决定 了 每 个 用 户 的 
真实 体验 是 无 法 通过 其 地 途径 来 完全 模拟 或 再 现 的 。 但 
是 对 于 一 个 界定 明确 的 用 户 群体 来 讲 ， 其 用 户 体验 的 共 
性 是 能 由 经 由 良好 设计 的 实验 来 认识 到 ,。 


3 


图 18-2 首页 后 两 行 的 效果 图 


225 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) PI 


设计 理念 页 面 的 效果 分 析 


在 设计 理念 页 面 中 ， 将 放置 网 站 设计 方向 的 内 容 ， 比 如 有 哪些 服务 、 最 新 发 表 的 一 些 文章 
等 内 容 ， 通 过 这 个 页 面 ， 阅 读者 能 看 到 某 一 项 服务 的 详细 内 容 和 着 个 服务 的 部 分 成 功 案例 。 

这 个 页 面 也 是 采用 了 四 行 样式 ， 其 中 ， 第 一 行 、 第 二 行 和 第 四 行 的 样式 和 首页 是 完全 一 
致 的 ， 都 是 页 头 和 页 脚 ， 而 在 第 三 行 里 ， 包 括 服务 导航 加 详细 内 容 组 成 的 模块 ， 图 18-3 中 只 
给 出 了 第 三 行 的 效果 。 


我 们 的 服务 二 
标志 设计 
+ Vigit 
+ LoGo 设 计 标志 ， 是 机 明 事物 特征 的 记号 。 它 以 单纯 、 星 著 、 易 识别 的 物象 、 图 形 或 文字 符号 力 直 观 滞 言 ， 除 表 示 什 么 、 代 往 什 么 之 
一 外 ， 还 具有 表达 意义 、 情 局 和 指 信行 动 等 作用 。 
* Wt 标志 作为 企业 CIS 战 虞 的 景 主要 部 分 ， 在 企业 形象 传递 过 程 中 ， 是 应 用 景 矿 活 、 出 现 蝴 率 最 高 ， 同 时 也 是 景 关键 的 元 素 . 企 
外 建设 二 业 强 大 的 树 休 实力 、 交 善 的 管理 机 桂 ， 居 质 的 产品 和 服务 ， 都 衣 委 于 标志 中 ， 通 过 二 岂 的 刺 部 和 反复 齐 夯 ， 评 评 的 留 在 受 
次 心中 
+ 设计 标志 (logo 设 计 ) 与 企业 的 经 营 荣 窟 相关 ， 是 企业 日 党 经 营 活 动 、 广 上 宣传 、 文 化 建设 、 对 外 交流 必 不 可 少 的 元 素 ， 它 随 著 企 
让 业 的 成 长 ， 其 价 信也 不 断 增 长 ， 曾 有 人 岂 言 - 印 使 一 把 火把 可 口 可 乐 的 所 有 容 产 覆 光 ,可口可乐 托 着 其 商标 ， 就 能 重 疡 起 
来 ,可 想 而 知 ， 的 香 要 性 。 因 此 ,具有 长 远 图 光 的 企业 ,十分 重视 LOGO 设 计 风 时 了 解 LOGO 的 作用 ， 在 企业 建立 初期 ， 居 
+ 网 站 设计 秀 的 标志 设计 设计 无 帮 是 日后 无 形 贾 产 积 黑 的 重要 载体 ， 如 果 没 有 能 才 观 后 网 企业 精神 、 产 业 侍 点 ,造型 科学 优美 的 标志 ， 
等 企业 发 展 起 来 ， 在 总 志 化 油 整 ， 持 对 全 业 造成 不 必要 的 澳 变 和 损失 - 
商标 设计 
界面 设计 行业 案例 展 示 
+ 三维 设计 梧 6 有 青蛙 图 案 的 标志 设计 
?9 某 公 司 的 商标 和 Lo00 设 计 ， 夯 面 一 再 总 主题 ， 采 用 多 种 色彩 结合 简洁 突出 主题 
”fash 动 面 设计 园 和 亚 亚 :> 
最 新 长 表 文 章 
。 理 名 图 案 标志 设计 欣 沉 
5 个 经 典 标志 设计 欣 筑 
+ 习 的 标志 设计 欣 其 全 
te 经 奥 标 志 行 党 ,至 景 和 文字 的 完 身 指 孔 ， 堪 称 经 抽 之 作 
， 灵 帮凶 意 标 才 设 计 欣 党 查看 > 


+ 生 者 规 划 投 资 面 朋 设计 的 
安 具 公司 面 册 设计 欣 党 
3 张 颜色 丰富 的 标志 设计 欣 
。 这 内 公司 画册 设计 欣赏 3 张 闫 色 丰 二 的 标志 设计 欣 党 
14 枉 经 奥 标 志 图 片 ， 背 景 和 文字 的 寺 半 指 配 , 夫 称 经 典 之 作 。 
， 弄 尊 色 本 窜 的 标 者 设计 拷 英 下 看 >> 
> crislabno 标 老 设计 欣赏 


， WOLDA 大 圭 LOGO 设 计 艳 问 作品 


图 18-3 设计 理念 页 面 的 效果 图 


和 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 18-1 所 示 。 


表 18-1 设计 公司 网 站 文件 和 目录 一 览 表 


模块 名 | 文件 名 功能 描述 
页 面 文件 | index.html 首页 
| webdesign.html 设计 理念 页 面 
[listhtml 成 功 案例 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
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团 


第 18 章 “布局 经 典 的 设计 公司 网 站 


18.2 ”规划 首页 的 布局 


因为 需要 搭建 一 个 既 经 典 又 有 特色 的 网 站 ， 所 以 设计 公司 网 站 的 首页 就 比较 重要 了 ， 下 
， 我 们 就 来 依次 讲述 其 中 重要 DIV 的 实现 方式 。 


搭建 首页 页 头 的 DIV 


首页 页 头 部 分 是 比较 重要 的 部 分 ， 它 包括 网 站 Logo 部 分 和 网 站 的 导航 部 分 ， 这 部 分 的 效 
果 如 图 18-4 所 示 。 


图 18-4 首页 页 头 设计 分 析 图 


<divclass="holder"> 


<div class="header"> 
<1-- Logo 部 分 -> 
<div class="logo"> 
<div id="flashcontent"> 
<ahref="#"><img src=" img/10go.png" border="0" /></a></div> 
</div> 
<!-- 上 导航 部 分 - -> 
<div class=" topmenu"> 
<ul> 
<liclass="topmenu_1"></1i> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<liclass="break"></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 


</ul> 

</div> 

</div> 

<1-- 下 导航 部 分 --> 

<div class="menu"> 

<ul> 
<liclass="left"></l1i> 
<liclass="break"></1i> 
<li class="select"><ahref="index.html "> 首页 </a></1i> 
<liclass="break"></1i> 
<1i><a href="webdesign.html"> 设 计 理 念 </a></1i> 


227 


QQ、|DIV+CSS 由 布局 案例 精粹 (第 2 版 ) 


SL 


<1li class="break"></1i> 


</ul> 
</div> 
</div> 


其 中 ， 第 12 行 、 第 23 行 、 第 27 行 等 都 引用 了 同一 个 名 叫 break 的 CSS， 在 这 个 CSS 中 没有 
定义 字体 的 大 小 ， 因 为 其 中 没有 用 到 文字 ， 只 是 以 背景 图 片 作为 分 割 符 把 导航 分 割 开 来 ， 其 
代码 如 下 所 示 。 


.topmenuul li.break { 
float : left; <! 左 对 齐 --> 
background-image : url(../img/topmenu_break.png); <! 引用 背景 图 片 


background-position : left top; <! 左 对 齐 --> 
background-repeat : no-repeat; <! 无 拉 伸 --> 
line-height : 0; 

font-size : 0; 

width : 31px; 

height : 31lpx; 


在 第 2 行 里 ， 是 通过 一 个 大 的 DIV 包 含 网 站 简介 和 网 站 广告 ， 这 部 分 的 效果 如 图 18-5 所 示 。 


创意 设计 公司 


创意 设计 有 限 公司 始 创 于 2009 年 ， 由 jas iit 师 所 组 成 
的 普 业 设计 公司 。 创 意 设 计 为 客户 提供 全 面 专 业 的 品牌 形象 策划 、 市 场 推广 、 同 站 建设 、 平面 视 
觉 形象 、 包 装 设计 、 情 萄 印刷 、 展 示 袜 | 间 设计 的 服务 。 


冰 半 三 尺 非 一 日 之 塞 好 的 设计 总 能 震 扬 心灵. 
创意 坚持 为 客户 提供 具有 前 瞪 性 ， 高 品质 的 设计 服务 ， 在 中 国 的 本 土 市 场 中 融入 国际 视野 ， 以 
提升 形象 力 帮 助 客户 制胜 市 场 的 过 程 中 融入 人 文 关 怀 和 社会 责任 。 使 设计 成 为 企业 


图 18-5 企业 简介 部 分 的 DIV 效果 图 


这 部 分 的 关键 代码 如 下 所 示 ， 由 于 比较 简单 ， 这 里 就 不 做 分 析 了 。 


1 
2 
3 
4. 
3 
6 
8 


Fk 


<div class="moodbar"> 
<div class="moodbar_text"> 


<h2> 创 意 设计 公司 </h2> 

创意 设计 有 限 公司 始 创 于 2009 年 ， <br /> 

<br /> 

冰冻 三 尺 非 一 日 之 寒 .好 的 设计 总 能 震撼 心灵 . .... . <br /> 


创意 坚持 为 客户 提供 具有 前 瞻 性 、 <br /> 
<ahref="#"> 
<img width="113" height="27" border="0" src="img/1266933661_meerinfo. 


gif" style="padding: 22px Opt Opt;" /></a> 
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本 和 拭 闪 


TO </div> 


Us <img width="921" height="241" src="img/1267014266_Moodbar_Homepage. 
TPE 
12. </div> 


搭建 优秀 网 站 案例 “部 分 的 DIV 


首页 正文 部 分 其 实 是 由 两 列 组 成 的 ， 其 中 第 一 列 又 分 为 上 部 分 和 下 部 分 ， ”优秀 网 站 案 
例 ”部 分 位 于 上 部 分 ， 其 效果 如 图 18-6 所 示 。 


优秀 网 站 案例 


我 们 把 艺术 的 灵感 ， 以 创 间 性 的 " 思 扒 、 触 是 自 | 造 出 与 币 场 要 结合 时 的 最 
佳 切合 点 ,专业 地 实现 企业 品牌 文化 的 提升 创造 出 个 心 的 视 各 文化 。 


图 18-6 优秀 案例 部 分 DIV 的 效果 图 
优秀 网 站 案例 部 分 的 实现 代码 如 下 所 示 。 


<div class="box"> 
<div class="box_t"></div> 
<div class="box_m"> 
<div class="box_tekst"> 
<h2 style="margin: Opt Opt 7px; "> 优秀 网 站 案例 :</h2> 


1 
2 
3 
4 
9 
6: 我 们 把 艺术 的 灵感 ， 以 创意 性 的 ”思维 、 触 感 " 创 造 出 与 市 场 相 结合 时 的 最 佳 切合 点 ， 专 
业 地 实现 企业 品牌 文化 的 提升 ， 创 造 出 悦 心 的 视觉 文化 。<br /> 

水 

8 

9 


<br /> 

5 <div class="portfolio"> 

<div id="sl"><imgwidth="376" height="186" alt="1001gedichten.jpg” 
src="img/1268216614_1001lgedichten.jpg" /> 


10. <img width="376" height="186" 
alt="123krabbels.jpg" src=" img/1268216614_123krabbels.jpg" /> 
i 


</div> 
EE </div> 
LS Br 
14. <div style="text-align: right;"> 
5 <ahref="#"> 
16e 


<img width="122" height="27" border="0" 
src="img/1267000212_naardeportfolio.gif" style="padding: 17px 3px Opt Opt;" /> 

I </a></div> 

18 . </div> 
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19. </div> 
20. <div class="box_b"></div> 
21. </div> 


在 这 部 分 代码 中 ， 主 要 注意 的 就 是 第 2 行 和 第 20 行 ， 它 们 各 自 引 用 了 不 同 的 CSS， 分 别 
是 box_t 和 box_b， 正 是 这 两 个 CSS 定 义 了 这 个 DIV 的 边框 ， 使 得 它 和 其 余 的 DIV 区 分 开 来 。 


搭建 ”我 们 的 观点 ”部 分 的 DIV 


我 们 的 观点 部 分 位 于 首页 第 一 列 的 下 半 部 分 ， 
ee 这 部 分 的 样式 如 图 18-7 所 示 。 


届 略 决定 出 路 ， 观 使用 过 经 验 思路 决定 出 路 ， 驴 性 过 经 
验 。 


et 下 面 给 出 这 个 部 分 的 关键 实现 代码 ， 这 部 分 的 


艺林 的 灵感 ， 以 自 褒 性 的 ' 轩 推 、 角 夺 ,加 计 出 与 市 场 相 结 全 


ee 整体 布局 和 上 部 分 是 相同 的 ， 而 它 的 详细 内 容 部 分 
创新 乃 万 物 成 长 之 得 艺术 是 开 的 花头 ， 决定 有 了 营 莽 吸收 ， 阳 光 的 昭 比较 简单 ， 这 里 就 不 再 做 详细 说 明 和 o 


躺 ， 才能 开放 美丽 的 花 人 儿 。 我 从 生 于 艺 村， 因 天 条 的 风沙 、 凶 银 证 人 
云 ;一 尾 不 扫 ， 何以 要 天 下 ? "各 轩 库 日 党 小 事 和 借 不 好 ， 谁 会 放心 格 大 
事 普 从 你 


要 多 


图 18-7 我 们 的 观点 部 分 的 效果 


1. <divclass="box"> 

2 <div class="box_t"></div> 

号 : <div class="box_m"> 

人 <div class="box_tekst"> 

本 <h2> 我 们 的 观点 </h2> 

G6: <img width="70" vspace="5" height="61" align="right" 


src="img/1268320543_wie_isl.jpg" /> 思路 决定 出 路 ， 观 念 胜 过 经 验 
1: <bri/>ebr /> 


和 /><br /> 

9. <ahref="#"> 更 多 . . .</a> </div> 
LO </div> 

3s <div class="box_b"></div> 

32 </div> 

13. </div> 


搭建 ”我 们 的 设计 理念 ”部 分 的 DIV 


在 我 们 的 设计 理念 部 分 中 ， 其 外 框 部 分 和 前 两 个 部 分 是 一 样 的， 在 内 部 是 包含 了 几 个 不 
同 的 文字 描述 ， 这 部 分 的 效果 如 图 18-8 所 示 。 


布局 经 典 的 设计 公司 网 站 


设计 表现 上 。 当 下， 与 下 说 旨 肯 商品 大 行 天 到， 不 各 品 
是 商业 设计 百 光 开放 。 攻 和 设 
言 组 . 


策略 弄 设计 是 一 种 综合 的 服务 方式 

入 克 型 议 计 是 一 种 综合 的 服务 方式 ， 对 服务 方 厅 说 ， 设 
计 不 阿 是 间 娄 的 一 项 作业 ， 而 是 更 多 其 它 部 门 基 与 和 星 
和 的 尘 暴 娃 立 下 区 讯 - 币 场 -分 析 - 害 位 - 反 鸡 的 整体 模 式 
的. 

第 栈 开 设计 不 再 单 二 的 是 梨 个 他 章 的 执行 ， 或 者 是 梨 系 
到 顺 目 中 的 一 环 ,而 是 参与 项 目的 独 过 论证 ,充分 运用 
诡计 专长 汶 企 业 样 立 良 好 形象 服务 。 重 提 视 芝 的 重要 
性 ,是 因为 在 第 划 现 在 满 天 的 时 代 ， 入 们 又 再 次 各 
了 产品 的 访 苑 兆 乔 、 宇 业 的 整 伯 开 象 。 作 佛 产 品 取 神 市 
场 的 耘 功 避 羽 是 因为 第 旭 生 的 大 创意 ， 从 而 拔 坑 了 其 它 
因素 


ia _ 


图 18-8 我 的 设计 理念 部 分 的 DIV 效果 图 


这 部 分 的 关键 代码 如 下 所 示 。 

1. <divclass="boxen_split"> 

4 <div class="box"> 

3 <div class="box_t"></div> 

4. <div class="box_m"> 

Lo <div class="box_tekst"> 

6 <h2> 我 们 的 设计 理念 </h2> 

FE <tablewidth="386" cellspacing="0" cellpadding="0" border="0"> 

大 <tbody> 

9. <tr> 

10. <tdwidth="90" valign="top" align=" left" style="padding: 10px Opt; 
border-top: lpx solid rgb(222, 222, 222) ; border-bottom: lpx solid rgb(222, 222, 
222Y 区 

医 <img width="70" vspace="5" height="74" style="padding: Opt;" 
src="img/1268319969_nieuw_webdesign.jpg" /></td> 

Lo <td valign="top" align="left" style="padding: 10px Opt; border- 
top: lpx solid rgb(222, 222, 222) ; border-bottom: lpx solid rgb(222, 222, 222) ; "> 

13: <h3> 创 意 转化 为 生产 力 </h3> 

14. <span style="font-size: 11px; "> 物质 需求 为 主 .<br /> 

152 </span><a href="#"><span style="font-size: 11px; "> 

16: 详细 . . .</span></a></td> 

灿 人 和 </tr> 

18. </tbody> 

19: </table> 

2 <br .> 

2 

2 </div> 

2 </div> 

24. <div class="box_b"></div> 

局 </div> 

26. </div> 
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这 部 分 是 正文 部 分 的 第 二 列 ， 其 外 框 和 前 两 个 部 分 是 一 样 的 ， 所 以 这 里 就 不 再 详细 分 析 
了 。 这 里 需要 我 们 注意 的 就 是 从 第 7 行 开 始 ， 我 们 使 用 了 table 这 个 标签 ， 这 是 一 个 经 典 的 DIV 
嵌 套 table， 因 为 在 某 些 情况 中 ，DIV+CSS 并 不 能 完全 地 实现 想 要 的 页 面 效 果 ， 这 个 时 候 DIV 
其 套 table 就 可 以 发 挥 作用 了 。 


搭建 页 脚 部 分 的 DIV 


页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明和 法 律 条 款 等 内 容 ， 效 果 如 图 18-9 所 示 。 


图 18-9 页 脚 部 分 的 DIV 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 代 码 比 较 简单 ， 所 以 就 不 再 详细 分 析 了。 


1. <divclass="footer"> 

2 <div class="footer_1"> 

3 <ahref="#" target="_blank"> 首 页 </a> | 

4 <a href="#"> 网 站 地 图 </a>| 

5 <! 省 略 其 他 导航 - -> 

6 </div> 

ee <div class="footer_r "> 法 律 条 款 | 责任 和 权力 | 创意 设计 网 &copy; 2005-2010 保留 
一 切 权 利 <br /> 

3 </div> 

J </div></div> 
人 ER 首页 CSS 效 果 分 析 


在 前 面 描 述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 
首页 中 其 他 CSS 效 果 ， 如 表 18-2 所 示 。 


表 18-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


CSS 描 述 和 关键 代码 


<div class="logo"> 定义 Logo DIV 的 宽度 、 内 边 距 
.logo { 
float : left; 
padding : 27px 0 0 14px; 区 
width : 333px; ee 
height : 78px:; 
} 
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( 续 表 ) 
DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class="menu"> ”| 定义 导航 栏 的 项 出 效果 
.menu { 


position : absolute; 
right : 0; 


六 


top : 72px; 

background-image : url(../img/menu.gif); 
background-position : right top; 
background-repeat : no-repeat; 

padding : 0 9px 0 0; 


3 
<div class="box_t"></| 使 用 现 有 图 片 作 为 DIV 的 边框 
div> .box_t{ 
float : left; 
background-image : url(../img/box_top. 
gif); 


background-position : left top; 


background-repeat : no-repeat; 


width : 458px; 
height : 6px; 


18.3 ”设计 理念 页 面 


在 设计 理念 页 面 中 ， 我 们 将 在 主体 部 分 里 ， 通 过 两 列 的 样式 介绍 本 公司 的 设计 理念 ， 这 
部 分 的 上 半 部 分 和 页 脚 部 分 与 首页 非常 相似 ， 所 以 我 们 就 不 做 重点 讲述 了 。 我 们 将 按 逐 模块 
的 方式 分 析 这 个 页 面 中 重要 DIV 的 实现 方式 。 


我 们 的 服务 ”部 分 的 DIV 


在 我 们 的 服务 部 分 中 ， 使 用 ul 和 1i 实 现 服务 项 的 菜单 ， 效 果 如 图 18-10 所 示 。 
这 部 分 的 代码 如 下 所 示 ， 其 中 ， 第 2 行使 用 了 ul 实现 了 标题 的 显示 ， 而 从 第 6~16 行 里 ， 使 
用 诸多 1i 实 现 菜单 的 显示 。 
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> VIR 计 


? LOGO 设 计 

> 画册 设计 

> 创意 设计 

> 品牌 设计 

> 海报 设计 

> 网 站 设计 

> 商标 设计 

> 界面 设计 

* 三 维 设计 

> flash 动画 设计 


图 18-10 我 们 的 服务 部 分 的 效果 


1. <div class="submenu "> 

2 <ul><br /><h2> 我 们 的 服务 </h2> 

3 <1i> 

4. <div class="submenu_shadow"></div> 
5 < 

6 <1i><a href="#">VI 设 计 </a></1i> 

水 <1i><ahref="#">LOGO 设 计 </a></1i> 

8. <1i><a href="#"> 画 册 设 计 </a></1i> 

9. <1i><a href="#"> 创 意 设计 </a></1i> 

10: <1i><a href="#"> 品 牌 设计 </a></1i> 
ik <1i><a href="#"> 海 报 设计 </a></1i> 
12 <1i><a href="#"> 网 站 设计 </a></1i> 
132 <1i><ahref="#"> 商 标 设计 </a></1li> 

i: 网 <1i><ahref="#"> 界 面 设计 </a></1i> 
a <1i><a href="#"> 三 维 设计 </a></1i> 
16. <1i><a href="#">flash 动 画 设 计 </a></1i> 
Wr </ul> 

18. </div> 


二 


上 面 代码 中 DIV 的 样式 ， 定 义 在 第 1] 行 的 submenu 中 ， 这 部 分 CSS 代 码 如 下 所 示 ， 其 9 
第 1~8 行 ， 定 义 了 这 个 DIV 里 ul 的 样式 ， 而 从 第 9~18 行 ， 定 义 了 其 下 ul 和 Oi 部 分 的 样式 。 


.submenuul { 
float : left; 
background-color : #bed4dd: 
margin : 0; 
padding : 0; 
list-style-type : none; 
width : 219px; 


.submenuul 1i{ 
oat left: 


OOO000OD- 


ee 
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WE background- image : url(../img/submenu_out .gif): 
2 background-position : left top; 

1 党 background-repeat : no-repeat ; 

14 . margin : 00 lpx; 

9 line-height : normal ; 

165 font-family : Arial; 

这 font-size : 12px: 

Law 


行业 案例 展示 部 分 的 DIV 


在 行业 案例 展示 部 分 中 ， 将 用 图 片 的 形式 展示 本 公司 的 一 些 业务 ， 这 部 分 的 实现 代码 如 
下 所 示 ， 它 使 用 了 标题 + 图 片 + 文字 的 样式 ， 如 图 18-11 所 示 。 


行业 来 例 展示 


有 青蛙 图 案 约 标志 设计 
某 公 司 的 商标 和 Logo 设 计 ， 画面 一 青 名 为 主题 。 采 用 多 种 色彩 结合 简洁 充 出 主题 


项 & 
bE 
网 动 

5 个 经 典 标志 设计 欣 涯 
经典 标志 行 党， 背景 和 文 于 的 放 美 和 配 ， 堪 浆 经典 之 作 
本 看 
3k 毅 色 丰 二 的 标志 设计 欣 黄 
14 坟 经典 标志 图 片 ， 崩 基 和 文字 的 完美 挡 也， 堵 称 经 典 之 作 ， 
查看 


图 18-11 行业 展示 部 分 的 效果 


实现 此 部 分 的 HTML 代 码 如 下 ， 其 中 我 们 能 看 到 ， 在 第 1 行 里 ， 使 用 h2 实 现 行业 案例 展 
示 ”部 分 的 文字 ， 在 下 面 的 第 2~11 行 里 ， 使 用 table 的 形式 ， 展 示 了 图 片 和 文字 的 效果 。 


1. <h2> 行 业 案 例 展示 </h2> 

2. <tablewidth="650" cellspacing="0" cellpadding="0" border="0"> 

& <tbody> 

4 <tr> 

DE <td width="90" valign="top" align="left" style="padding: 10px Opt; 


border-top: lpx solid rgb(222, 222, 222) ; border-bottom: lpx solid rgb(222, 222, 
222) ; "><img width="70" height="74" align="left" style="padding:2px:;border:solid 
lpx #E1E1El;" src="img/demol .jpg" /></td> 


6. <tdvalign="top" align=" left" style="padding: 10px Opt; border-top: 
lpx solid rgb(222, 222, 222) ; border-bottom: 1px solid rgb(222, 222, 222) ; "><h2> 有 青 
蛙 图 案 的 标志 设计 </h2> 

入 某 公司 的 商标 和 Logo 设 计 ， 画 面 一 青蛙 为 主题 。 采 用 多 种 色彩 结合 ,简洁 ,突出 主题 
二 brFy> 

8. <a href="#"> 查 看 &nbsp'; &gt ; &gt ;</a></td> 

9 二 /ET 

10 . </tbody> 

11. </table> 
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下 尼 科 疾 。 标志 设计 部 分 的 DIV 
标志 设计 部 分 采用 了 纯粹 的 文字 样式 ， 这 部 分 的 效果 如 图 18-12 所 示 。 
标志 设计 


标志 ,是 表明 事物 特征 的 记号 。 它 以 单纯 、 星 著 、 易 识别 的 物象 、 图 形 或 文字 符号 为 直观 语言 ， 除 表示 什么 、 代 圭 什 么 之 
外 ， 还 具有 表达 意义 、 情 感 和 指令 行动 等 作用 。 

标志 作为 企业 CIS 战 略 的 最 主要 部 分 ， 在 企业 形象 传送 过 程 中 ， 是 应 用 最 三 远 、 出 现 疾 率 景 高， 同时 也 是 景 关键 的 元 素 。 企 
业经 大 的 整体 实力 完善 的 管理 机 制 ， 蕊 质 的 产品 和 服务 ， 都 该 通 概 于 标志 中 ,通过 不断 的 刺 洲 和 反复 刻画 ， 评 评 的 留 在 受 
次 心中 。 

标志 [jogo 设计) 与 企业 的 经 营 第 密 相关 ,是 企业 日 常 经 营 活动 、 广 告 宣传 、 文 化 建设 、 对 外 交流 必 不 可 少 的 元 素 , 它 随 着 企 
业 的 成 长 ， 其 价值 也 不 断 增 长 ， 曾 有 人 断言 :即使 一 把 火把 可 口 可 乐 的 所 有 资产 烧 光 ,可口可乐 侨 若 其 商标 ， sr 
采 "， 可 起 而 知 ， 的 重要 性 。 因 此 ， 具 有 长 远 眼光 的 企业 ， 十 分 重视 LOGO 设 计 同时 了 解 LDGO 的 作用 ,在 全 业 建立 初 ! 

秀 的 标志 设计 设计 无 左 是 日 后 无 形 资 产 积 黑 的 重要 载体 ， 加 果 没 有 能 客观 反映 企业 精神 产业 特点 ， a 
等 企业 发 展 起 来 ， 在 做 变化 调整 ， 格 对 企业 造成 不 必要 的 当 费 和 损失 。 


图 18-12 标志 展示 部 分 的 效果 


于 这 部 分 主要 用 于 显示 文字 ， 所 以 代码 比较 简单 ， 在 第 1 行 里 ， 使 用 hl 标签 来 定位 标 
题 ， 而 在 第 2~7 行 ， 使 用 了 p 和 br 等 文字 相关 的 标签 。 


1. <hl> 标 志 设 计 </h1> 

2. <p> 标 志 ， 是 表明 事物 特征 的 记号 。 它 以 单纯 、 显 著 、 易 识别 的 物象 、 图 形 或 文字 符号 为 直观 语 
言 ， 除 表示 什么 、 代 替 什 么 之 外 ， 还 具有 表达 意义 、 情 感 和 指令 行动 等 作用 。 

3、<bryX> 

4. 标志 作为 企业 CIS 战 略 的 最 主要 部 分 ， 在 企业 形象 传递 过 程 中 ， 是 应 用 最 广泛 、 出 现 频率 最 
高 ， 同 时 也 是 最 关键 的 元 素 。 企 业 强大 的 整体 实力 、 完 善 的 管理 机 制 、 优 质 的 产品 和 服务 ， 都 被 涵 概 于 标 
志 中 ， 通 过 不 断 的 刺激 和 反复 刻画 ， 深 深 的 留 在 受众 心中 。 <br /> 

5 标志 (1ogo 设 计 ) 与 企业 的 经 营 紧密 相关 ， 是 企业 日 常 经 营 活动 、 广 告 宣传 、 文 化 建设 、 对 
外 交流 必 不 可 少 的 元 素 ， 它 随 着 企业 的 成 长 ， 其 价值 也 不 断 增 长 ， 曾 有 人 断言 : &quot ; 即使 一 把 火把 可 口 
可 乐 的 所 有 资产 烧 光 ， 可 口 可 乐 任 着 其 商标 ， 就 能 重新 起 来 &quot ; ， 可 想 而 知 ， 的 重要 性 。 因 此 ， 具 有 长 
远 眼 光 的 企业 ， 十 分 重视 LOGO 设 计 同 时 了 解 LOGO 的 作用 ， 在 企业 建立 初期 ， 优 秀 的 标志 设计 设计 无 疑 是 日 
后 无 形 资产 积累 的 重要 载体 ， 如 果 没 有 能 客观 反映 企业 精神 、 产 业 特点 ， 造 型 科学 优美 的 标志 ， 等 企业 发 
展 起 来 ， 在 做 变化 调整 ， 将 对 企业 造成 不 必要 的 浪费 和 损失 。<br /> 

6 <bFy> 

TT /p> 


深蓝 色调 的 社区 网 站 


社区 网 站 具有 开放 、 包 容 、 充 满 人 文 关怀 的 特色 ， 以 社区 网 民 为 中 心 ， 
通过 社区 网 站 ， 人 们 能 相互 沟通 ， 认 识 更 多 的 朋友 。 

本 章 我 们 将 介绍 一 个 社区 网 站 ， 其 中 包括 首页 、“ 博 客 列表 ”和 “个 人 
博客 ”三 个 页 面 。 下 面 我 们 就 来 分 析 一 下 这 类 网 站 的 设计 方式 。 


19.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 社 区 网 站 的 首页 和 ”博客 列表 页面 的 设计 样式 ,而 个 人 博 
客 页 面 风 格 比较 简单 ， 所 以 就 不 再 分 析 了 。 


人 EN 首页 效果 分 析 


这 个 社区 网 站 的 首页 布局 是 非常 经 典 的 ， 它 采用 了 三 行 的 样式 ， 其 中 ， 第 一 行 里 放置 网 

站 Logo、 网 站 导航 和 站 内 搜索 这 三 个 部 分 ， 第 二 行 里 ， 放 置 ”欢迎 语 、 导航 和 图 片 和 

分 类 导航 ”三 个 部 分 ， 在 第 三 行 里 ， 放 置 的 就 是 部 分 导航 和 版 权 相 关 信息 ， 效 果 如 图 19-1 
所 示 。 


QQ、|DIV+CSS 网 站 布局 案例 精粹 (第 2 版 ) 


放置 Logo, 


[SSE 信息 和 站 内 搜索 
87 社区 网 


欢迎 娩 的 到 冬 


民生 现代 美 趟 馆 开 馆 展 
+ 年 


晤 新 新 闻 | 最 新 消息 


新 闻 和 消息 热门 博客 


美术 专区 
> 最 新 新 闻 
》 最 新 消息 


美术 展厅 


导航 


图 19-1 首页 效果 图 


博客 列表 页 面 的 效果 分 析 


在 博客 列表 页 面 
站 博客 的 特色 。 


下 


和 ， 放 置 博客 分 类 和 博客 分 类 介绍 模块 ， 这 个 页 


网 页 游戏 


网 站 正文 部 分 ， 放 
置 导 航 和 分 类 导航 


入 一切 权利 


回 
| 


As 一 人 一 


这 个 页 面 采用 了 三 行 样式 ， 其 中 


二 行 的 效果 。 


qr 


- 展示 了 本 网 


第 一 行 和 第 三 行 的 样式 与 首页 完全 一 致 ， 都 包括 页 头 
0 页 脚 。 而 在 第 二 行 里 ， 包 括 分 类 导航 、 


分 类 介绍 和 常见 问题 组 成 的 模块 ， 


图 19-2 显 示 的 是 
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不 一 样 的 博客 带 你 进入 不 一 样 的 世界 常见 问题 


初 角 用 户 帮 助 : 如 何 锁定 单 入 日 志 ， 

互 记 密码 怎么 办 ? 如何 修改 密码 ， 
关于 博客 “图片 ”" 相 朋 ” 全 指南 ， 

文化 集中 地 * 交 天 下 朋友 * 如何 找到 和 陡 目 己 的 群 组 ? ， 

进入 这 里 ,让 你 岛 略 世 界 各 弛 的 文化 在 这 里 ,全 世界 都 有 你 的 朋友 


寻找 社区 达 人 * 旅游 知 天 下 * 到 | 排列。 许多 博客 专 广 


据 张 
贴 时 间 ， 以 倒序 方式 由 新 


在 特定 四 上 提供 评论 
你 的 网 上 这 园 六 六 之 前 来 看 看 ， 全 有意 起 不 的 收 下 听 ee 


较 个 人 的 日 记 。 
2 
sp 
游戏 


网 粹 十 大 公会 进驻 ， 欢迎 戎 来 报名 ? 


图 19-2 博客 列表 页 面 的 效果 图 


网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 javascript 三 个 目录 分 别 保存 网 站 所 用 
到 的 图 片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 19-1 所 示 。 


表 19-1 电影 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
bolglist.html 博客 列表 页 面 
博客 内 容 页 面 
Css 目录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
javascript 目 录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


19.2 ”规划 首页 的 布局 


因为 需要 搭建 内 容 较 多 的 社区 网 站 ， 所 以 网 站 首页 的 设计 就 比较 重要 
分 析 其 中 重要 DIV 的 实现 方法 。 


二 


面 我 们 依次 
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搭建 首页 页 头 的 DIV 


效果 如 诺 


19-3 所 示 。 


EE 


首页 页 头 是 比较 重要 的 部 分 ， 它 包括 网 站 Logo 部 分 、 导 航 部 分 和 站 内 搜索 部 分 ， 页 头 的 


FEED [2 


19-3 首页 页 头 设计 分 析 


加 
网 


<div id="header"> 


<ul class="1logos"> 
<1i><a id="1logo" class=" 1l0ogo-oxweb" href="index.html "> 
<img src= "img/logo.gif” /></a></1i> 
</ul> 
<div class="find-it"> 
<ul id="shortcuts "> 
<1li class="first"><ahref="#"> 首 页 </a></1i> 


</ul> 
<div class="forms"> 
<div> 
<label for="searchinput "> 搜索 </1abe1> 
<input type=" text" id="searchinput" value=" 请 输入 " /> 
<fieldset> 
<label for="search-type" class="radio"> 
<input type= "radio” name= "search_type” id= 


class="radio" checked="checked" /> 名 字 查 找 </1abe1l> 


<label for="search-type2" clas radio"> 


<input type="radio" name="search_type" id=" 


value="people" class="radio" /> 昵称 查找 </1abe1> 


2 
ea 
24. 
5 
26 . 
i 
282 
295 
30. 
Sl 


</fieldset> 


"search-type”" 


search-type2" 


<input type="image" name="submit" src="img/button_search.gif" 
class="searchbutton" /> 


</div> 

<form id="quick-links"> 

<div> 
<1label for="quick-1ink"> 快 速 导航 </1abe1> 
<select name=" location" id="quick-1link"> 


<option value="" selected="selected "> 快速 导航 </option> 


</select> 


<input type=" image" src=" img/button_ go.gif" class="searchbutton" /> 


</div> 
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5 
36> 


其 


</form> 
<div class="clear "></div> 
</div> 
</div> 
</div> 


h， 第 7 行 引 用 了 同一 个 名 为 shortcuts 的 CSS， 在 这 个 CSS 中 定义 了 导航 的 小 标签 ， 


代码 如 1 


1 
忆 
3 
4 
repeat 

和 
6 
区 
8 


下 所 示 。 


#shortcuts 1i{ 
margin-left:15px; /* 左 外 边 距 */ 
padding- 1eft :8px; /* 左 内 边 距 */ 
background: url(../img/bullet_arrow_white.gif) left 0.4em no- 


/* 设置 背景 小 图 标 ， 并 设置 在 左边 ， 不 拉 伸 */ 


margin-top:6px; /* 顶部 间距 */ 
和 


搭建 ”网 站 导航 ”部 分 的 DIV 
网 站 导航 部 分 由 网 站 欢迎 语 和 导航 组 成 ， 在 网 站 导航 部 分 的 DIV 中 ， 定 义 了 背景 图 片 ， 


其 效果 如 图 19-4 所 示 。 


欢迎 您 的 到 来 


新 闻 和 消息 x 热门 转 帖 


网 页 游戏 


| 


19-4 网 站 导航 部 分 的 DIV 效 果 


出 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


WOD— 


6. 


<div id="newsflash" > 


<div> 
<h2> 欢 迎 您 的 到 来 </h2> 
<a href="#"> 欢 迎 您 来 到 我 们 的 网 站 </a></div> 
</div> 


<div id="features_ panel" styles background url(1rmex7727_ 


Buildings210509_55.jpg) 50% 0 no-repeat" class="no-js"> 


i 
Ss 
9 


<ul id="features_menu"> 
<liclass= feattre 1 > 
<h2><a id="feature_link_1" href="#"”class="current "> 新 闻 和 消息 </a></ 
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h2> 
10. </1i> 
i <liclass="feature_6"> 
12> <h2><a id="feature_link_6" href="#"> 热 门 博客 </a></h2> 
13: </1i> 
14 . 
Ls: </ul> 
162 <div id=" features_submenu "> 
1 名 <ul class= "feature_stories "> 
18 . <1i> 
19 . <h3>News</h3> 
D0 <ahref="#"> 留 住 生活 瞬间 ” </1i> 
Zl: </ul> 
22: "</div> 
23. </div> 


在 上 述 代码 中 ， 第 1~4 行 是 网 站 欢迎 语 ， 这 部 分 文字 内 容 可 以 根据 网 站 主题 自由 发 挥 ， 
在 第 6 行 中 直接 引用 了 一 个 背景 图 片 ， 使 这 个 DIV 看 起 来 更 有 立体 感 。 在 第 17 行 的 代码 中 引用 
了 一 个 名 叫 feature_stories 的 CSS， 在 这 个 CSS 中 ， 定 义 了 这 个 模块 的 背景 色 、 背 景 图 片 等 ， 其 
代码 如 下 所 示 。 


1 #features_submenu ul .feature_stories 1i.video_panel{ 

2 position:absolute; 

left :25%; 

4. top:0; 

与 width:210px; /* 宽度 */ 

6 background: #1b395e url(../../img/panel_gradient .gif) top left 
repeat-x 

1 /* 背景 色 ， 背 景 图 片 ， 横 向 拉 伸 */ 

8 . height :196px; /* 定义 高 度 */ 

9. opacity: 1; /* 定义 不 透明 度 */ 

lea 


上 面 代码 中 ， 第 6 行 代码 定义 了 背景 色 和 背景 图 片 ， 并 把 图 片 横向 拉 伸 ， 在 第 9 行 中 使 用 
了 一 个 CSS 属 性 opacity， 这 个 属性 是 用 来 定义 此 DIV 的 透明 度 的 ， 这 里 1 表示 这 个 DIV 是 不 透 
明 的 。 


搭建 ”分 类 导航 ”部 分 的 DIV 


分 类 导航 部 分 是 首页 的 主体 部 分 ， 这 部 分 包含 了 社区 网 站 的 所 有 分 类 ， 以 及 分 类 下 的 所 
有 导航 ， 其 效果 如 图 19-5 所 示 。 
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内 


网 站 


加 


分 类 导航 部 分 的 关键 实现 代码 如 下 所 示 。 


<div id="site_menu"> 
<ul> 
ell 


19-5 分 类 导航 部 分 DIV 的 效果 


四 


<h2 class="admissions"><a href="#"> 我 的 社区 </a></h2> 


<1i><a href="#"> 进 入 我 的 社区 </a></1i> 


1 

2 

3 

4. 

De <ul> 
6 

ff 

8 </ul> 
9 


</ul> 
<ul> 
<liclass="newline"> 


<ul> 


</ul> 
= 


OODNWN-O.: 


20 </ul> 
21. </div> 


<h2 class="international"><ahref= 


<1i><a href="#"> 最 新 新 闻 </a></1i> 


"#"> 美 术 专 区 </a></h2> 


说 明了 。 从 上 述 代码 中 可 以 看 出 ， 这 部 分 搭建 方法 


在 上 述 代 码 的 第 1 行 中 引 


h2 标 签 自动 引用 背景 图 片 等 属性 ， 其 代码 如 下 所 示 。 
1. /* 鼠标 离开 效果 */ 
2. #site_ menuul h2.admissionsa{ 
3 
repeat 
4. width: 97Px; 
or 


上 面 代码 只 是 部 分 代码 ， 其 他 分 类 的 实现 代码 与 这 部 分 代码 是 一 样 的 ， 这 里 就 不 再 重复 


两 个 ul 组 成 ， 而 这 两 个 ul 又 分 别 嵌 套 ul 组 


了 CSS 代 码 site_menu， 在 这 个 CSS 代 码 中 ， 定 义 了 此 DIV 中 的 


> background: transparent url(../../img/admissions.gif) top left no- 
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/* 鼠标 停留 效果 */ 

#site_menuul h2a:hover { 
border-bottom: lpx solidwhite; 
margin-bottom:Opx; 


OO 


oa 
上 述 CSS 代 码 可 以 看 出 ， 只 要 在 h2 标 签 中 使 用 有 D 名 为 site_menu 的 CSS， 并 在 此 标签 中 
使 用 超 链 ， 就 能 看 到 文字 下 划 线 的 效果 。 这 里 的 文字 下 划 线 效果 使 用 另外 一 种 方法 实现 ， 即 
通过 第 8 行 代码 ， 将 底部 的 边框 定义 为 1 个 像素 ， 并 设置 边框 的 颜色 为 白色 。 

玉环 玉 疾 搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明 这 两 部 分 内 容 ， 效 果 如 图 19-6 所 示 。 


放置 网 站 导航 和 版 权 相 关 


图 19-6 页 脚 部 分 的 DIV 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <div id="footer "> 

六 <dl id="footer-updated "> 

35 <dt>&copy; 2010 社区 网 </dt> 

4. <dd> 保 留 一 切 权利 </dd> 

Sr </dl> 

6. <ul class="extras "> 

Ti <liclass="first"><ahref="#" class="sitemap”> 网 站 地 图 </a></1i> 
8. <1i><a href="#"> 法 律 条款 </a></1i> 

9. <1i><a href="#"> 联 系 我 们 </a></1i> 

10. <1i><a href="#"> 关 于 我 们 公司 </a></1i> 
11. </ul> 

12. <divclass="clear"></div> 

13— </div> 


在 上 述 代码 中 ， 第 2-5 行 使 用 了 一 个 比较 少 用 的 标签 Qi， 这 个 标签 的 效果 是 里 面包 含 的 内 
容 会 自动 缩 进 。 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 19-2 所 示 。 


表 19-2 首页 DIV 和 CSS 对 应 关系 一 ， 


深蓝 色调 的 社 


内 


网 站 


览 表 


DIV 代 码 


CSS 描 述 和 关键 代码 


效果 图 


<ul class="logos"> 


定义 了 在 这 个 区 域 中 不 是 任何 项 目 符号 
.logosli{ 


float: left; 
list-style-type: none; 
3 


<div class="desc"> 


<div class="find-it"> 


定义 字体 格式 并 设置 透明 度 
#features_menu li { 

float: left; 

width: 16.5%; 


text-align: center; 

text-transform: uppercase; 

opacity:0.99999; 

} 
定义 DIV 宽 度 并 
find-it { 

float:right; 


设置 虚线 分 隔 符 


margin-top:20px; 
padding:0; width:500px 
limportant; background:url(../img/ 
header_block_divider.gif) left top repeat-y; 


} 


文字 中 如 有 


19.3 博客 列表 页 面 


博客 列表 页 面 主 要 用 来 显示 和 查找 


现 方式 。 


博客 列表 页 面 左边 导航 部 分 的 DIV 


博客 丈 


表 使 用 常 


整个 列表 的 多 


前 的 案例 


下 看 


按 图 


区 域 


别 介绍 实现 方式 ， 相 应 的 实现 代码 如 下 所 示 。 


户 博客 的 ， 本 节 我 们 来 具体 分 析 一 下 这 个 页 面 


用 的 ul 和 1i 实 现 ， 红 色 外 边框 部 分 标 出 了 
部 容器 ， 这 种 设计 方式 在 之 
绍 ， 效 果 如 图 19-7 所 示 。 
19-7 给 出 的 


中 有 所 介 


span 标 题 和 ul+li 列 表 分 


图 19-7 导航 部 分 效果 
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1. <div id="secondary-content"> <span class="mainSection"> 博 客 </span> 

2 <ul id="secondary-nav" style= "font-size:12px"> 

妃 : <1i> <ahref="#"> 文 化 </a> </1i> 

4. <1i> <ahref="#"> 交 友 </a> </1i> 

请 <1i> <ahref="#"> 社 区 </a> </1i> 

8. <1i> <ahref="#"> 旅 游 </a> </1i> 

i <1i> <ahref="#"> 游 戏 </a> </1i> 

3 </ul> 

9. </div> 

上 面 DIV 中 使 用 的 CSS 定 义 如 下 所 示 。 

1. #secondary-content ul.links li{ 

2 padding- left: 14px; 

3 background: url(../img/link_bullet .gif) left 0.6emno-repeat; 

Ed ¢ 

5. #secondary-content h2,{ 

6: color : #333 

1 font-size:1.4em; 

0 

9. span.mainSection{ 

10. font-size:1.7em; 

Ns font-weight :normal; 

dea font-family:"Trebuchet MS", Helvetica, Verdana, Arial, sans-serif; 
<1--// 字 体 集合 - -> 

13: Color :#444; 

14. display:block; <!--// 块 显示 ， 整 行 填充 --> 

15 margin:10px020px0; <!--// 定 位 上 10 像 素 ， 下 10 像 素 --> 

le 上 

17. #secondary-nav { 

18 . border-bottom: lpx solid #d5d5d5 ; 

19 . margin: 4px 0 20px 0; 

0 text-align: left; 

2 font-size: 0.9em; 

2 line-height: 1.5em; 

235 width:98%; 

24. } 

25. #secondary-nava { 

26 . color : #666 !important ; 

ZT <1--// !important: 跟 在 css 属 性 后 使 用 兼容 IE7 - -> 

28. } 

29. #secondary-nav a:hover { 

30 . color :#OFOFOF !important ; 

SR 二 


这 里 给 出 了 较为 详细 的 列表 CSS 代 码 ，secondary-content ul.links li 统一 该 区 域 的 ul 和 1i 的 
边 距 和 背景 图 片 ， span.mainSection 指定 span 标 签 中 ID 是 mainSection 的 样式 ，display 设 置 为 块 
(block) ， 表 示 span 像 p 标 签 一 样 占 整 行 ， 下 面 nav a 中 带 有 !important 关 键 字 已 经 注释 出 它 的 
意思 。 我 们 要 考虑 设计 的 页 面 是 否 能 做 到 浏览 器 兼容 ， 这 里 使 用 important 是 其 中 的 一 种 兼容 
方法 ， 正 6 不 识别 ， 正 7 可 识别 ， 这 样 在 属性 后 加 上 ! importantiFIE7 能 够 正确 识别 相关 页 面 集 
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的 颜色 属性 。 还 有 很 多 其 他 有 关 兼 容 性 的 方法 ， 我 们 在 接 下 来 的 其 他 章节 中 继续 说 明 。 
博客 列表 页 面 博客 显示 部 分 的 DIV 


博客 列表 页 


团 


中 间 部 分 介绍 相关 博客 的 内 容 ， 中 间 部 分 页 面 效 果 如 图 19-8 所 示 。 


不 一 样 的 博客 带 你 进入 不 一 样 的 世界 


前 来 看 看 ,会 有 意 想不开 | 的 收获 哦 


图 19-8 博客 列表 效果 图 


实现 此 部 分 的 HTML 代 码 如 下 所 示 。 


1. <div id="primary-content"> 

2 <hl>Colleges</hl> 

3 <div id="intro"> 

如 <p> 不 一 样 的 博客 带 你 进入 不 一 样 的 世界 </p> 
5: </div> 

6 <div class="teasers "> 

i <div class="teaser newline "> 

8 <div class="content"> 


9. <h2> <ahref= "#"> 文化 集中 地 </a><span>&nbsp;</span> </h2> 

10. <div> 

Me <p> 进 入 这 里 ， 让 你 领略 世界 各 地 的 文化 </p> 

1 </div> 

13 <a href="#"> <img src=" img/271_collgegatebanner .jpg" height="62" 
width="215" /></a> </div> 

14. </div> 

Ly <div class="teaser "> 

16 . <div class=" content "> 

I <h2> <a href="#"> 交 天 下 朋友 </a><span>&nbsp;</span> </h2> 

18 . <div> 

19. <p> 在 这 里 ， 全 世界 都 有 你 的 朋友 </p> 

20. </div> 

21 <a href="#"> <img src=" img/246_student27banner .jpg" height="62" 
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width="215" /></a> </div> 


22. </div> 

233 <!---// 其 他 列表 项 代码 略 。 .---> 

2 <div class="teaser full newline "> 

25: <div class= "content "> 

26: <h2> <a href="#"> 游戏 </a><span>&nbsp;</span> </h2> 
2 <div> 

28. <p> 网 游 十 大 公会 进驻 ， 欢 迎 前 来 报名 ! </p> 
29. </div> 

30. </div> 

Ss </div> 

32. </div>> 


从 上 面 代 码 也 可 以 看 出 中 间 部 分 由 标题 列表 项 和 其 他 内 容 组 成 ， 该 区 域 的 父 类 容器 
primary-content 的 CSS 代 码 如 下 所 示 。 


#primary-content { width:49%; } 
#primary-content hl { letter-spacing:1px; } 
#primary-content #introp{ 

color: #333: 
| 
#primary-content pa{ 

text-decoration:underline,; 


OFF 了 NDNAOD- 


| 

9. #primary-content pa:hover { 

10. text-decoration:none,; 

We 

12. #primary-content #intro a, #primary-content #intro a:link, #primary- 
content #introa:visited { 


13 color : #476A8F ; 

14. } 

15. #primary-content #introa:hover { 
16. color: #002d62; 

Ur 


上 述 代码 主要 实现 列表 项 的 样式 布局 。 标 题 、 描 述 、 图 片 、 具 体 的 子 标签 如 列表 项 内 部 
的 锚 点 和 图 片 标签 基本 上 使 用 了 网 站 的 公共 定义 ， 唯 一 不 一 样 的 地 方 就 是 使 用 alink 和 a:havor 
的 样式 。 
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互联 网 的 迅猛 发 展 催生 了 一 大 批 的 购物 网 站 ， 一 些 商家 把 店铺 开 到 网 络 
上 ， 通 过 “图 片 加 文字 ”的 展示 方式 吸引 客户 访问 。 

本 章 将 开发 一 个 “食品 专卖 ”的 主题 购物 网 站 ， 这 个 网 站 除了 要 有 常规 
购物 网 站 的 “导航 明确 ”和 “用 图 片 突 出 商品 ”等 特色 外 ， 还 要 在 构建 网 站 
的 时 候 使 用 文字 说 明 的 方式 突出 食品 的 特点 ， 比 如 设置 “食品 介绍 ”和 “ 食 
品 和 健康 ”等 要 素 。 


20.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 将 介绍 首页 、 食品 信息 介绍 和 ”食品 分 类 介绍 ”页面 ， 其 中 ， 食品 信息 
介绍 的 风格 与 ”食品 分 类 介绍 “非常 相似 ， 所 以 不 做 详细 分 析 。 


首页 效果 分 析 


于 是 购物 网 站 ， 所 以 在 首页 中 不 仅 要 包含 比较 完整 的 “导航 菜单 ”， 还 要 用 图 片 加 
字 ”的 方式 展示 最 热卖 的 商品 。 
这 个 网 站 的 首页 包含 的 内 容 比较 多 ， 分 为 六 行 样式 ， 在 第 一 行 里 ， 放 置 包括 Logo 图 标 和 
导航 部 分 “等 内 容 的 页 头 部 分 。 第 二 行 里 放置 着 ” 选 购 商 品 和 在线 支付 等 购物 类 功 
能 模块 。 第 三 行 里 放置 具有 动态 循环 效果 的 图 片 ， 包 括 广告 、 热 门 商品 介绍 等 内 容 ， 第 四 行 
是 首页 的 主体 部 分 ， 放 置 了 图 片 加 文字 形式 的 商品 介绍 内 容 。 第 五 行 里 放置 的 是 针对 本 
购物 网 站 的 ”快递 导航 ”模块 ， 这 个 模块 相当 于 站 点 地 图 ， 能 让 用 户 很 容易 地 找到 自己 感 兴 
趣 的 页 面 。 而 最 后 一 行 是 页 脚 部 分 ， 它 只 包含 了 版 权 声明 信息 。 
首页 的 篇 幅 比 较 长 ， 分 两 个 截图 说 明 ， 首 页 的 前 三 行 效 果 如 图 20-1 所 示 ， 后 三 行 的 效果 
如 图 20-2 所 示 。 
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儿童 食品 在 线 选 购 


美食 社区 


网 银 在 线 支付 关于 我 们 


的 价格 都 高 于 市 面 上 同 


和 类 国产 食品 
详细 内 容 ， 详细 内 容 、 


松 乃 好 口感 方形 威 化 鹿 泰国 干果 营养 健康 新 选择 


威 化 鹿 采 用 新 鲜 、 纯 蔡 生 洪 养 补益 ， 有 助 于 
正 、 支 链 尝 断 多 、 类 性 延年益寿， 所 以 民间 又 
大 的 焰 米 为 主 料 ， 先 将 称 之 为 "长 生 困 "。 
es 区 详细 内 容 ， 

详细 内 容 ， 


图 20-1 首页 前 三 行 的 效果 图 
进口 食品 类 鲜 正 当时 美味 体验 :美国 青豆 洋 十 送 
第 四 行 ， 包 含 商品 图 片 i 
和 商品 介绍 的 信息 基于 绝 大 多 数 进 口 食品 本 活动 精 选 人 歌 商品 ， 


开怀 考评" 详 零 食 ” 


分 别 是 ， 美 国 青豆 芥末 
味 (小 包装 ) 、 美 国 青 
豆 芥末 味 (大 包装 ) 


详细 内 容 ， 


只 要 你 稍微 留心 一 下 , 
便 会 发 现 身 边 的 进口 食 
品 专 营 店 从 稀少 到 常 
见 ， 越 来 越 多 。 


详细 内 容 、 


快速 导航 会 品 碗 购 
第 五 行 ， 快 递 导 航 菜单 。 及/ 儿 食品 


各 岁 儿童 食品 
进入 博客 园 要 幼儿 乳 制品 
VIP 专区 


儿童 乳 制品 
VIP 会 员 登 录 


儿 重地 会 
儿童 饮料 
申请 VIP 会 员 


专家 咨询 


订阅 免费 期 乔 
VIP 会 员 的 忧 鼓 
VIP 会 届 帮 助 


图 20-2 首页 的 后 三 行 效果 
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食品 分 类 介绍 页 面 的 效果 分 析 


在 食品 分 类 介绍 页 面 中 ， 使 用 导航 的 形式 介绍 食品 信息 ， 而 且 在 其 显 目 位 置 ， 放 置 了 


些 热门 商品 的 信息 。 


这 个 页 


H 


的 页 头 和 页 脚 部 分 与 首页 非常 相似 ， 而 了 


E 体 部 分 分 成 三 列 ， 大 致 的 效果 如 


20-3 所 示 ， 与 首页 一 样 的 ”快速 导航 ”和 页 脚 部 分 ， 图 中 就 不 再 给 出 了 。 


我 型 我 秀 系列 


花花 物语 系列 
产品 牛 赏 


真心 真意 ( 荐 果 ) 


美食 社区 品 吉 网 银 在 线 支付 关于 我 们 


草 等 布 卫 制作 下 艺 尽 显 台湾 奶 
进口 的 奶油 ， 加 上 特质 的 冰激凌 机 器 ， 使 得 草 著 布 可 St 
的 与 伦比 。 本 . 
Us 正 ， 奶 香 浓郁 ， 条 香洲 
查看 详细 ， 了 人 ，“ 和 珍珠 ”口感 动 道 
二 


水 果 派 


水 果 派 主要 是 以 多 种 水 果 为 主 ， 水 果 和 奶 昔 和 碎 冰 
的 混合 口味 ， 是 夏天 的 热 销 产品 


查看 详细 ， 


A 美味 她 伦 。 


揪 一 播 ， 内 一 见 ， 香 浓 
的 奶茶 表面 附 清 绵 绵 的 
包 泡 、 水 塞 桃 泡 泡 、 玫 


泡 泡 ， 自 由 自在 绵绵 
泊 泊 系列 美味 得 了， 清 


草 葡 密 枫 奶 昔 
正宗 原配 方 
查看 详细 ， 


查看 详细 ， 


水 果 沐 汶 疲 
水 果 冰 激 变 ， 超 级 美味 
查看 详细 、 


晶莹 透 序 ， 清 谅 真 口 ， 
自由 自在 泥 谅 冰 沙 系 
列 ， 美 味 盛夏 冰 品 一 
族 ， 清 热 解 里 ， 消 烦 解 
了 酒 ， 芒 果 沙 冰 、 条 豆沙 
冰 ， 蓝 付 、 柳 档 、 桂 回 


给 夏 日 ， 统 给 选择! 
查看 详细 ， 


请 


图 20-3 食品 分 类 介绍 页 面 的 效果 图 


《CE 网 站 文件 综述 


这 个 页 


面 


片 、CSS 文 从 


的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 
+ 和 JS 代码 ， 文 件 及 其 功能 如 表 20-1 所 示 。 


网 
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表 20-1 食品 专卖 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
| promotions.html 食品 分 类 介绍 页 
| food-Safety html 食品 信息 介绍 页 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


20.2 ”规划 首页 的 布局 


首页 中 包含 的 要 素 比较 多 ， 内 容 也 比较 复杂 ， 我 们 可 以 把 首页 分 成 几 个 部 分 来 分 析 首 页 
多 重要 DIV 的 实现 方式 。 


人 搭建 首页 页 头 的 DIV 


页 的 页 头 部 分 占 的 篇 幅 比较 大 ， 包 含 了 Logo 图 片 、 导 航 菜单 和 ”登录 和 注册 模块 ”三 


大 部 分 ， 效 果 如 图 20-4 所 示 。 


| 恒 登录 | 联系 我 人 | 注册 | 放大 旬 人 和 征 2 
OO 
i 四 


已 尖 博客 团 VIP 会 员 专 区 儿童 食品 在 线 选 购 美食 社区 食品 知识 网 站 帮助 网 银 在 线 支付 关于 我 们 


图 20-4 首页 页 头 的 DIV 设计 分 析 图 


实现 页 头 部 分 的 关键 代码 如 下 所 示 ， 在 第 3~5 行 里 ， 定 义 了 网 站 的 Logo 图 标 ， 从 第 7~14 
行 里 ， 用 form 的 形式 定义 搜索 部 分 的 功能 模块 ， 从 第 15~30 行 ， 定 义 了 导航 部 分 的 菜单 。 下 面 
我 们 给 出 了 一 个 有 子 菜单 的 示例 代码 。 


1. <div id="header "> 

2 <! Logo 图片 - -> 

3 <ahref="index.html" class="logoMain"> 
4 <img src=" img/woolworths- logo.png" width="230" height="57" /> 
Sr /a 

6. <! 定义 搜索 功能 框 --> 
ye <formclass="hSearch" id="searchForm" method="post" > 
8 <fieldset> 

号 <label for="search"> 

1 


i 


; <input id="search" class="hSearchText" type="text" onfocus="this. 
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value= 


Tt 
value=" 


31. 


;" value=" 请 输入 " name="search_query"/> 
<input class="hSearchGo" type="image" src="img/search-btn-go.gif" 

Go"/> 

</label> 

</fieldset> 
</form> 
<ul id="navSub"> 

<1i> <a href="#" > 登录 </a></1i> 

省 略 其 他 功能 模块 


</ul> 


<ul id="navMain"> 
<1i id="mNav-home"><ahref="index.html" > 首页 </a> </1i> 
<! 带 二 级 菜单 --> 
<li id="mNav-whatsNew" class=""><a href="Food-Safety .html" > 博客 园 </a> 
<ul> 


<li class=""><a href='#'> 查看 最 新 </a></1i> 


<li class=""><a href='#'> 写 博客 </a></1i> 
<1li class=""><a href='#'> 进 入 博客 园 </a></1i> 
</ul> 
</1i> 
省 略 其 他 菜单 内 容 
</ul> 
</div> 


在 上 面 代 码 第 1 行 里 ， 我 们 引用 了 ID 为 header 的 CSS， 这 部 分 的 关键 代码 如 下 所 示 ， 它 定 


义 了 页 头 部 分 的 背景 图 、 内 外 边框 等 属性 。 


时 
2 
图 */ 


#header { 
background:#00511f url(../img/header-bg.jpg) 00 repeat-x; /* 设 置 背 景 


display:block; 

margin:0 auto; /* 设 置 外 边框 */ 
min-height : 110px; 

height :auto | important; 
height :110px:; 

padding:15px 00; /* 设 置 内 边框 */ 
position:relative; 
width:968px; /* 定 义 宽度 */ 
z-index:1; 


搭建 ”功能 模块 ”部 分 的 DIV 
在 首页 页 头 的 下 方 ， 放 置 着 由 6 个 子 模块 组 成 的 功 


能 模块 ， 


其 中 一 个 ” 选 购 商品 部 分 的 效果 。 


这 部 分 的 主要 作用 也 是 导航 ， 图 20-5 给 出 的 是 


下 面 我 们 来 看 一 下 图 20-5 所 示 效 果 的 关键 实现 代 


码 。 其 中 


模块 ， 这 里 我 们 仅仅 给 出 一 个 模块 的 代码 。 图 20-5 选 购 商品 部 分 的 DIV 效果 图 


Ph， 从 第 6~9 行 ， 用 和 i 的 方式 定义 了 6 个 功能 
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1. <divclass="alternate" id="home"> 

2 <div class="grid_1" id="sidebar"> 

&) <h3> 

4. 快速 导航 

与 </h3> 

6 <ul> 

A <1li id="btn-whatsnew"><ahref= "#"><span> 选 购 商品 </span></a></1i> 
8 省 略 其 他 5 个 功能 模块 的 代码 

9 . </ul> 

10. </div> 

lis</div> 

请 注意 上 面 代码 的 第 1 行 里 ， 引 入 了 ID 为 alternate 的 CSS， 这 部 分 的 代码 如 下 所 示 。 
1. .alternate#sidebar liaf{ 

2 background-image:url(../img/sprite-icons-2.jpg) ; /* 背 景 图 */ 
3 background-repeat :no-repeat ; 

4. display:block; 

6 height : 100px; /* 定 义 高 度 */ 

6. padding- 1eft :0px; /# 定 义 左边 部 分 的 内 边 距 */ 

全 : 


正 是 在 第 2 行 代码 中 引入 了 如 图 20-6 所 示 的 背景 ， 所 以 在 这 个 部 分 ， 才 能 看 到 6 个 ”图 片 


加 文字 效果 的 功能 模 


块 


Lo EE 上 EE 


图 20-6 功能 模块 的 背景 图 


搭建 ”商品 展示 ”部 分 的 DIV 


| 


由 于 是 购物 网 站 ， 所 以 在 首页 中 ， 会 用 比较 大 的 篇 
幅 来 介绍 商品 信息 。 

首页 中 包含 有 6 个 展示 商品 的 模块 ， 它 们 的 样式 是 完 
全 一 致 的 ， 图 20-7 给 出 了 其 中 的 一 个 样式 的 效果 。 

这 部 分 的 关键 代码 如 下 所 示 ， 在 第 3 行 里 ， 定 义 了 标 


20.7 一 个 商品 展示 部 分 的 效果 图 。。 是 部 分 ， 在 第 6~8 行 ， 定 义 了 图 片 部 分 ， 而 在 第 10 和 第 11 


行 里 ， 定 义 了 文字 介绍 部 分 的 内 容 。 


<div class="promotop grid" style="padding-top:10px;"> 


<! 标题 --> 


<h3><ahref="#" > 梦幻 棉花 糖 </a></h3> 


<! 图 片 --> 
<ahref="#" 
<img src 


1 

2 

六 

4. <hr/> 

号 

6 

Ts 
height="100"/> 


> 
="img/promo-comm-grants.jpeg " border="0" width="145" 


il 第 20 齐 食品 专 类 的 购物 网 站 


</a> 

9 < 六 了 介 绍 > 

10. ”<p> 棉 花 糖 莲 松 柔软 ， 入 口 即 溶 ， 口 味 甘甜 ， 深 受 很 多 年 轻 人 的 青睐 </p> 
11. <p><ahref="#" class="arrow"> 详 细 内 容 </a></p> 

12. </div> 


搭建 ”快速 导航 ”部 分 的 DIV 


购物 网 站 里 包含 的 页 面 非常 多 ， 所 以 需要 一 个 用 于 综合 导航 的 模块 。 在 首页 中 ， 为 了 不 
喧 宾 夺 主 ， ”快递 导航 ”部 分 放置 在 靠 下 方 的 位 置 ， 这 部 分 的 效果 如 图 20-8 所 示 。 


快速 导航 博客 园 儿童 食品 壬 购 美食 社区 网 站 帮助 关于 我 们 
查看 最 新 机 幼儿 食品 进入 社区 在 二 提问 关于 公司 
写 博 客 Tv3 岁 儿童 食品 最 新 动态 意见 建议 关于 BR 
进入 博客 园 轨 幼 儿 民 制品 专题 报道 联系 我 们 

儿 理 乳 制品 讨论 考区 加 入 我 们 社会 责任 

VIP 专区 儿童 要 食 社区 帮助 事业 
IP 会 员 量 录 儿童 议 科 建 库 支持 公司 新 闻 

申请 VIP 会 员 专家 管 记 食品 知识 既 营 省 理 
订阅 免费 其 刊 食物 的 指 配 在 线 中 请 上 
VIP 会 员 的 忧 囊 委 食 营养 学 是 投诉 
VIP 会 员 帮助 广 意 要 点 同 银 在 本 支付 加 里 通道 
在 线 得 记 支付 平台 联系 我 们 
支付 流程 人 才 招聘 

支付 帮助 


图 20-8 快速 导航 部 分 的 DIV 效果 图 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 在 第 5 行 里 ， 定 义 了 一 级 菜单 ， 而 从 第 7~11 行 里 ， 使 
用 ul 和 1i 定 义 了 二 级 菜单 ， 由 于 其 他 菜单 和 ”博客 园 ”系列 的 菜单 风格 完全 相同 ， 所 以 代码 就 


不 再 重复 给 出 了 。 
1. <div id="quickLinks" class="container"> 
2 <h3> 快 速 导 航 </h3> 
<divclass="grid_1"> 
4 <! 一 级 菜单 --> 
请 <h4><ahref="#" > 博客 园 </a></h4> 
6 <! 二 级 菜单 --> 
<ul> 
8 <1i><a href='#'> 查看 最 新 </a></1i> 
9 . <1i ><ahref= '#'> 写 博客 </a></1i> 
TO <1i ><ahref='#'> 进入 博客 园 </a></1i> 
UIs </ul> 
12. ”省 略 其 他 菜单 代码 
13. </div> 
14. <div class="clear "></div> 
15. </div> 


请 注意 在 上 面 代码 第 14 行 里 ， 引 入 了 ID 为 clear 的 CSS， 这 部 分 代码 如 下 所 示 ， 它 采用 了 
clear:both 的 方式 ， 清 除了 前 面 代码 中 的 样式 。 
1. #clear { 


2 clear :both; 
3 
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搭建 页 脚 部 分 的 DIV 


这 个 网 站 的 页 脚 部 分 非常 简单 ， 仅 仅 放置 了 版 权 声 


儿童 食品 网 . 保留 一 切 权利 . 明 ， 效 果 如 图 20-9 所 示 。 
图 20-9 页 底部 分 的 DIV 页 脚 部 分 关键 的 实现 代码 如 下 所 示 ， 代 码 比 较 简 


单 ， 所 以 就 不 再 做 分 析 了 。 


#clear { 
clear :both; 


<div id= "footer "> 
<pPclass=" small "> 
儿童 食品 网 . 保留 一 切 权利 . 
</p> 

</div> 


EL 首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 痢 
页 中 其 他 CSS 的 效果 ， 如 表 20-2 所 示 。 


人 上 的 证 


描述 


8 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 


DIV 代码 

<p><a href="#" 
class="arrow"> 详 细 内 
容 </a></p> 


表 20-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
CSS 描 述 和 关键 代码 
定义 箭头 图 片 


.promotop a.arrow { 


background:url(../img/sprite-buttons.gif) 100% 
-49px no-repeat; 

float:left; 

font-weight:bold; 

padding-right: 10px:; 


} 
<a href="index.html" | 定义 宽度 、 悬 浮 方式 和 外 边 距 
class="logoMain "> .logoMain { 
float:left; 
margin-left:20px; 儿童 食 品 网 
width:230px; 
display:block:; 
<div id="footer"> 定义 外 边 距 、 内 边 距 、 字 体 居中 方式 和 宽度 
#footer { 
margin:0 auto; 
padding: 10px 0: 儿童 食品 网 . 保留 一 切 权 利 
text-align:center; 
width:968px: 
} 
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20.3 ”首页 的 动态 效果 


在 首页 中 ， 当 我 们 用 鼠标 指 到 菜单 上 ， 会 出 现 二 级 菜 “an 
pp， 移 走 后 菜 单 会 自动 消失 ， 效 果 如 图 20-10 所 示 。 | 
为 了 实现 这 个 效果 ， 需 要 编号 HTML 和 CSS 两 部 分 的 代 
码 。 首 先 看 一 下 HTML 部 分 的 代码 ， 如 下 所 示 。 图 20-10 动态 效果 的 示意 图 
1. <ul id="navMain"> 
Ee <1li id="mNav-home"> <a href="index.html"”> 首 页 </a> </1i> 
3 <li id="mNav-whatsNew" class=""><a href="Food-Safety .html" > 博客 园 </a> 
4. <ul> 
5 <li class=""><a href='#'> 查看 最 新 </a></1i> 
<li class=""><a href='#'> 写 博客 </a></1i> 
ye <li class=""><ahref= '#'> 进入 博客 园 </a></1i> 
8. </ul> 
9. </1i> 
10. 省 略 其 他 类 似 的 代码 


请 注意 第 1 行 定 义 了 名 叫 navMain 的 CSS， 关 键 代 码 如 下 所 示 ， 其 中 能 看 到 菜单 部 分 的 位 
置 是 在 屏幕 之 外 的 。 


1. #navMain 1i# { 


2 background-position:0 -38px; 
本 村 


而 当 鼠 标 移动 上 去 后 ， 菜 单 的 位 置 将 被 定义 到 屏幕 的 范围 内 ， 这 样 就 能 显 出 来 ， 请 注 
意 ， 下 面 的 代码 是 针对 hover 和 focus 两 个 事件 编写 的 。 


1. #navMain li#mNav-whatsNew:hover, #navMain li#mNav-whatsNew:focus， 
#navMain li#mNav-whatsNew.sfhover, #navMain li#mNav-whatsNew.active { 

2 background-position:-34px -38px; 

2 


20.4 ”进口 食品 页 面 


进口 食品 页 面 主要 包括 了 产品 分 类 列表 和 产品 展示 列表 两 部 分 内 容 ， 本 节 详 细 分 析 这 个 
页 面 的 实现 方式 。 
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进口 食品 页 面 分 类 列表 的 DIV 


1 
2 
3 
4 
5 
6 
省 
8 
9 


</div. 
上 述 代码 


图 20-11 分 类 列表 效果 


进口 食品 页 面 分 类 列表 用 DIV 进 行 设计 ， 它 没有 使 
Ul 标签， 使 用 的 是 DIV 作 为 列表 的 项 ， 用 锚 点 标签 进行 伪 
类 操作 ， 如 图 20-11 所 示 。 

上 图 列表 区 域 包含 在 ID 为 navc 的 容器 内 ， 设 计 了 三 
种 样式 ， 分 别 是 grid-1、navplain (默认 样式 ) 和 navact 
(选中 样式 ) ， 代 码 如 下 所 示 。 


| 


<div id="navc" class="grid_1"> 
<div class="navplain"> <a href="#"> 冰 激 凌 产品 特色 </a> </div> 
<div class="navact"><ahref='Promotions.html '> 五 谷 养 生 系列 </a></div> 
<div class="navplain"> <a href="#"> 炫 舞 酷派 系列 </a> </div> 


<div class="navplain"> <a href="#"> 我 型 我 秀 系列 </a> </div> 
<div class="navplain"> <a href="#"> 真 心 真意 (蔬果 ) </a> </div> 
<div class="navplain"> <a href="#"> 花 花 物 语系 列 </a> </div> 
<div class="navplain"> <a href="#"> 产 品 欣赏 </a> </div> 

> 


hh 的 列表 项 DIV 全 部 设置 为 块 显示 ，navact 当前 列表 项 比 默认 项 navplain 多 了 一 


个 底 边 样式 ， 样 式 代码 如 下 所 示 。 


.grid 


Loan 

19. #navc 
20. 

Ls 

2 

om 

24. #navc 
5 


i 
display:inline; 
foat:left， 
margin- left :Opx; 
margin-right :Opx; 
padding- left :10px; 


{ width:145px;} 
.navplaina { 

color :#009a3d; 
text-decoration:none,; 
display: block; 
font-size: lem; 
font-weight :bold.; 
padding: 5px 10px; 
text-decoration:none; 
border-bottom:dotted lpx:; 


.navplaina:hover { 
background-color :#00501f; 
color:#fff:; 

text -decorat ion:none,; 


navact a{ 
border-bottom: 1px dot ted:; 
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365 background-color :#00501f; 
2 color:#fff; 

28. display: block:; 

29: font-size: lem; 

0 font-weight :bold; 

Sl padding: 5px 10px:; 

S22 text-decorat ion:none; 
St 

在 上 面 代码 中 ， 


并 且 使 用 伪 类 hover 实 现 高 亮 显示 。 


进口 食品 页 面 产品 列表 的 DIV 


进口 食品 页 面 右边 部 分 是 产品 列表 ， 它 分 成 两 部 分 ， 左 半 部 分 显示 某 分 类 项 的 产品 ， 右 
半 部 分 是 相关 产品 系列 列表 ， 效 果 如 图 20-12 所 示 。 


1 
2 
3 
4. 
a></1i> 
5 
6 
了 
8 


ke 


PF" 草 将 窗 本 奶 昔 
正 这 原本 方 
| 查看 详细 ， 


列表 项 内 的 锚 点 标签 以 块 状 显 示 ， 这 样 可 以 自动 充满 列表 项 DIV 区 域 ， 


传承 台湾 本 土 精湛 奶茶 

制作 工艺 ， 尽 显 台 湾 奶 

欠 原 激 原味 ， 自 由 自在 
感 奶茶 


入 其 中 美味 地 伦 。 
查看 详细 ， 


绵绵 泡 泡 奶茶 


摇 一 摇 ， 网 一 见 ， 香 浓 
的 奶茶 表面 附 清 绵绵 的 
# ， 柠 榨 泡 泡 、 


和 泡 ， 
泡 泡 系列 美味 香 脐 , 清 


图 20-12 产品 列表 效果 图 
实现 产品 列表 部 分 的 DIV 代 码 如 下 所 示 。 


<div id="content" class="grid_3"> 


<div class="article-tools"> 
<ul> 


<li class="email first"><a href="#" 


<li class="print"><a href="#" title=" 


</ul> 
</div> 
<div id="bodycontent"> 
<h1> 冰 激 凌 </h1> 
<h2> </h2> 
<p></p> 
<bry> 


title="”rel="facebox"> 发 送 邮 件 </ 


”> 打印 该 页 面 </a></1i> 
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3 <div class="item-list clearfix"> <a href="#"><img src="img/pl.jpg" 
border= "0" alt="Fresh Market Update" width="145" height="100”/></a> 

1 <h4><ahref="#"> 草 莓 布丁 </a></h4> 

To <p> 进 口 的 奶油 ， 加 上 特质 的 冰激凌 机 器 . .</p> 

16: <p><a class="arrow" href= "#"> 查 看 详细 </a></p> 

Ys </div> 

18. <!---// 产 品 展示 项 代码 略 //----- > 

19: <hr /><div class="pagenav_wrapper "> 

20; <ul id="pagination" class="small"> 

2 <!--// 分 页 代码 略 ----> 

2 </ul> 

2 </div><br /><br /> 

24. </div> 

25. </div> 

26. <div class="grid_2"> 

27. <div class="promo grid "> 

28: <h3><a href="#"”>Q 感 奶茶 </a></h3><hr/> 

29. <a href="#"><img src=" img/pll1.jpg" border="0" width="145" height="100" 
/></a> 

30. ”<p> 传 承 台 湾 本 土 精湛 奶茶 制作 工艺 。 </p> 

31. <p><ahref="#" target="_blank" class="arrow"> 查 看 详细 </a></p> 

32. "</div> 

33. <divclass="promo grid "> 

34. <h3><a href="#" > 相关 介绍 </a></h3><hr/> <ahref="#" ></a> 

5 <pP><ahref="#" class="arrow"> 产 品 图 片 </a></p> 

36. </div> 

37, </div> 

这 里 使 用 DIV 自 上 而 下 进行 布局 ， 下 面 我 们 给 出 关键 的 样式 代码 。 

1. .item-list { 

2 clear :both; 

号 padding-bottom: lem; 

4. padding-right :5px; 

Dh 

6. #content .item-list img{ 

Te float: left; 

2 height :auto; 

a padding-right :10px; 

10. padding- left:0; 

ls width:145px; 

2 

13. .item-listp{ 

14 . margin- left:155px; 

L150 

16. .item-lista.arrow{ 

Ls background:url(../img/sprite-buttons.gif) 100% -49px no-repeat:; 

18: float: left; 

19. font-weight :bold; 

20. padding-right :10px; 

2 
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2 Waist PA -dot d 
23. .article-toolsul{ 


24. background:transparent url(../img/sprite-buttons.gif) Opx -150px 
no-repeat ; 

2 display:block; float: left; overflow:hidden.,; 

20 list-style-type:none; margin:0; padding:0; position:relative; 
width:auto; 

2 

28. .article-tools 1i{ 

29. background: transparent; height:20px; list-style:none; 
margin:00022px; 

30. padding:0; float :left,; width:auto; 

3 


32. .article-tools li .first {margin-left:0;} 
33. .article-toolsliaf{ 


34. background-color :transparent; background-image:url(../img/sprite- 
buttons.gif); 

358 background-position: 0 -200px; background-repeat: no-repeat, 
display:block; 

3 height :20px; overflow:hidden; text-decoration:none; text- indent:- 
5000px ;width:17px; 

| 

38. .article-tools .emaila{ 

395 background-position:0 -200px; 

40.} 

41. .article-tools .printa{ 

42. background-position:-38px -200px; 

43. } 


44./**// 其 他 样式 略 **/ 


上 面 代码 中 ， 只 给 出 了 工具 按钮 的 样式 和 一 个 产品 项 样式 ， 工 具 按 钮 包括 打印 和 保存 功 
能 ， 使 用 ul 标签 实现 ，.article-tools ul 样式 中 我 们 使 用 定位 背景 图 片 ， 超 出 部 分 隐藏 处 理 ， 并 
以 块 状 显 示 ，1i 内 的 a 标 签 使 用 背景 图 片 加 上 样式 化 的 文字 进行 定义 。 

lia 同样 使 用 了 定位 背景 图 ，text-indent : -5000 中 缩 进 设 为 负数 ， 表 示 不 显示 文字 。 
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视频 网 站 是 集 娱乐 、 影 视 、 嘉 宾 访谈 、 体 育 、 音 乐 等 各 种 丰富 多 彩 的 视 
频 资讯 为 一 体 的 综合 性 站 点 。 为 了 吸引 住 访问 者 ， 需 要 在 首页 中 ， 通 过 图 片 
和 文字 内 容 ， 直 接 体现 出 “震撼 性 ”的 视觉 效果 。 

此 外 ， 视 频 网 站 区 别 于 图 片 等 其 他 静态 内 容 网 站 的 一 个 重要 特点 是 


“ 动 ”， 所 以 ， 在 这 个 网 站 里 ， 需 要 尽 可 能 多 地 使 用 一 些 动态 的 图 片 实现 变 
幻 的 效果 。 


21.1 ”网 站 页 面 效 果 分 析 


本 章 介绍 的 这 个 视频 网 站 ， 不 仅 使 用 了 丰富 多 彩 的 颜色 来 吸引 访问 者 ， 而 且 尽 可 能 多 
通过 CSS 样 式 ， 实 现 动态 的 效果 。 
在 本 章 中 ， 将 着 重 分 析 首页 和 ”个 人 视频 专辑 ”页面 的 设计 样式 。 视频 播放 页面 


也 非常 美观 ， 色 彩 搭配 比较 到 位 ， 由 于 其 风格 与 前 两 个 页 面 非常 相似 ， 所 以 就 不 再 详细 分 析 
了 。 
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首页 效果 分 析 


视频 网 站 的 首页 非常 美观 ， 包 含 的 要 素 也 比较 多 ， 我 们 仍然 采用 三 行 的 样式 。 第 一 行 时 
放置 Logo 图 片 、 页 面 导航 和 搜索 模块 。 第 二 行 里 ， 使 用 看 似 零散 ”的 一 些 DIV 放 置 视频 入 
视频 介绍 的 内 容 。 在 第 三 行 里 ， 放 置 版 权 声明 和 导航 信息 。 

整个 首页 看 似 布局 凌乱 ， 不 过 ， 不 仅 不 会 让 人 感觉 不 顺眼 ， 而 且 还 能 恰到好处 地 给 人 一 
种 ” 形 散 而 神 不 散 ” 的 体验 。 此 外 ， 这 个 首页 使 用 一 张 风景 图 片 作为 背景 ， 更 能 让 人 感觉 到 
一 种 休闲 的 风格 ,首页 的 样式 如 图 21-1 所 示 。 


Tn 
| 


三 
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夏天 | 视频 网 


中 第 二 行 ， 视 须 同 
站 的 主体 部 分 
电视剧 


近期 新 视频 


日 期 
和 入 只 影 全 价 奖 
上 传人 : 夏天 视 山 


日 由 
混 强 人 | 妈 上 是 快 女生 天 移 失 车 位 
上 才 人 : 页 天 讽 名 


推荐 视频 


这 里 有 省 避 而 | 
区 大 的 电 讽 天 
可 上 各 节目 ， 目 
beta 甩 今后 我 们 会 下 
因 加 充实 新 节 目 ， 让 世上 
更 加 下 油 + 所 以 可 以 说， 
我 们 推出 是 力 了 委 位 过 妥 
的 同 友 们 , 精 忆 东 寻 的 直 
EAI NE 


夏天 视频 网 


网 
网 


21-1 首页 的 效果 
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个 人 视频 专辑 页 面 的 效果 分 析 


在 视频 网 站 中 ， 


每 个 人 可 以 通过 注册 成 为 会 员 ， 


[= 


然 


包含 自己 所 有 上 传 视频 的 


个 人 专辑 页 面 。 


这 个 个 人 专辑 页 面 


与 首页 一 样 ， 都 是 采用 


页 完全 一 致 。 而 在 第 二 行 


后 能 上 传 


三 行 样式 ， 其 中 ， 
行 里 ， 放 置 某 个 会 员 的 所 有 视频 ， 这 个 页 夯 


自 


A 


牢 


己 的 视频 ， 并 能 拥有 一 个 


一 行 和 第 三 行 的 样式 与 首 


的 样式 如 图 21-2 所 示 ， 其 


首页 完全 相同 的 页 头 和 页 
夏天 | 视频 网 


尾 图 中 就 不 再 


睹 趟 。 


®. 


项 
-确定 


放置 这 个 会 员 的 介绍 
和 所 有 的 视频 


mn 


搜索 


形势 和 政府 实施 的 拉 助 计 


APRIL 2010 


su no mw TH mm sh 

oa oa 03 
04 05 06 07 o8 09 10 
aznaaua 圈 "> 
18 19 20 21 22 23 24 


近期 新 视频 


] 放置 最 新 视频 


秽 看 视频 收藏 视频 


发 布 日 期 ; 年 7 月 
夏季 音乐 会 
发 布 人 : 二天 全 


发 大 日 期: 
型 秀 比赛 
中 国 湖南 : cai 


发 布 日 期 
群英 会 苍 笨 
发 布 人 : 怀 部 的 天 空 


网 
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21-2 个 人 视频 专辑 页 面 的 效果 


四 
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CGH 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 images、css 和 js 三 个 目录 分 别 保 存 网 站 所 用 到 的 


罗 | 


片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 21-1 所 示 。 


表 21-1 视频 展示 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
| trainlovers.html 个 人 视频 专辑 页 面 
| motorcycles.html 视频 播放 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


21.2 规划 首页 的 布局 


页 虽然 是 只 有 三 行 ， 但 其 中 包含 的 要 素 还 是 比较 多 的 ， 本 节 我 们 就 分 几 个 部 分 分 析 一 


下 首页 的 诸多 重要 DIV 的 设计 方式 。 


搭建 首页 页 头 的 DIV 


首页 页 头 包含 了 Logo、 导 航 菜单 和 搜索 模块 等 内 容 ， 效 果 如 图 21-3 所 示 。 


[ES | | 


图 21-3 首页 页 头 的 DIV 设 计 分 析 图 


实现 首页 页 头 部 分 的 关键 代码 如 下 所 示 。 


口 


<div class= "mast "> 


<hl title="Summertime" class=" logo"> 
<ahref=" index.html" class="bgPng"> 视 频 网 </a> 
</hl> 
<! 这 个 form 里 放置 搜索 模块 - -> 
<formclass="search"> 
<input name="q" type=" text" id="search" class="text" /> 
<ahref="#"> 
<img src=" images/btn-find.gif" border="0" style="margin-top:17px;" /> 
</a> 
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WI <AFaris 

12. <ul class="aux-nav "> 

VS <li class="atn"><a href="#"> 导 航 </a> 

14. <ul> 

Le <! 如 下 是 导航 部 分 的 子 菜单 - -> 

16. <1li class="summer "><a href=" index.html "> 首页 </a></1i> 

Ws <liclass="fall"><ahref="motorcycles.html "> 视频 </a></1i> 
18. <liclass="winter"><a href="trainlovers.html"> 社 区 </a></1i> 
19. <1li class="spring"><ahref="motorcycles .html "> 博客 </a></1i> 
2 </ul> 

Zs /iS 


2 <li class="rtl"><ahref="#"> 上 传 视频 </a></1i> 
2 <li class="pts"><a href="#"> 联 系 我 们 </a></1i> 


24. </ul> 
25. <div style="clear: both;"></div><! 清除 浮动 的 样式 - -> 
26. </div> 


在 上 述 代码 第 6~11 行 里 ， 用 form 的 形式 定义 了 ”搜索 模 
ppm” 块 。 的 效果 ， 在 第 13~23 行 ， 定 义 了 页 头 三 个 导航 菜单 ， 而 在 
第 16~19 行 ， 定 义 了 子 菜单 ， 子 菜单 的 效果 如 图 21-4 所 示 。 
图 21-4 父子 菜单 的 效果 图 上 面 代 码 首 先 定 义 右边 的 搜索 菜单 ， 然 后 再 定义 导航 菜 
单 。 所 以 在 相应 的 CSS 中 ， 会 包含 一 个 ”向 右 浮动 ”的 CSS 样 
式 ， 用 到 相关 元 素 上 之 后 ， 需 要 在 第 25 行 里 清除 定义 好 的 浮 
动 样式 。 


搭建 视频 导航 菜单 部 分 的 DIV 


视频 网 站 包括 的 各 类 视频 很 多 ， 所 以 需要 用 明确 的 导航 菜单 的 方式 ， 让 用 户 能 便捷 地 找 
到 自己 感 兴趣 的 视频 ， 本 网 站 的 视频 导航 部 分 的 效果 如 图 21-5 所 示 ， 其 中 也 是 用 了 父 菜单 加 
子 菜单 的 方式 实现 。 


视频 


图 21-5 视频 导航 部 分 的 DIV 效 果 图 
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这 部 分 的 关键 代码 如 下 所 示 。 
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1. <divclass="inner "> 

2 <! 不 带子 菜单 的 导航 菜单 --> 
<liclass="home"><ahref="index.html" class="a"> 首 页 </a></1i> 
4 <! 带子 菜单 的 导航 菜单 - -> 

后 <liclass="getaways"><ahref="motorcycles.html" class="a"> 视 频 </a> 
6 <ul> 

学 <1i><ahref="#"> 音 乐 视频 </a></1i> 

8 . <1i><ahref="#"> 游 戏 视频 </a></1i> 

9. <1i><a href="#"> 动 漫 视频 </a></1i> 

10. <1i><a href="#"> 搞 笑 视频 </a></1i> 

le <1i><a href="#"> 体 育 视 频 </a></1i> 

1 <1i><a href="#"> 教 学 视频 </a></1i> 


1 33 <1i><ahref="#"> 原 创 视频 </a></1i> 
14. </ul> 

TS 

16. <! 省 略 其 他 导航 菜单 代码 - -> 

17. </div> 


上 面 代码 中 使 用 i 和 ul 的 方式 定义 父 菜 间 


Eg 和 子 菜单 ， 请 注意 第 5 行 ， 在 li 标签 


为 gataways 的 CSS， 当 鼠标 移动 到 父 菜 


gataways 这 个 CSS 中 的 。 


搭建 ”热门 视频 ”部 分 的 DIV 


在 首页 的 上 部 ， 有 着 一 个 大 篇 幅 的 窗 体 ， 使 
位 置 非常 显眼 。 在 本 网 站 里 ， 我 们 放置 的 是 热门 视频 的 演示 图 ， 如 果 需 要 ， 这 号 


告 ， 这 部 分 的 效果 如 图 21-6 所 示 。 


会 自动 显示 出 来 ， 这 个 效果 就 是 定义 在 


循环 播放 的 方式 ， 播 放 着 多 张 


热门 视频 部 分 的 关键 现实 代码 如 下 所 示 。 


图 21-6 热门 视频 演示 


网 


人 DIV+CSS mammsppr #0) 2 有 下 Q 有 ©9|oo 
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1. <divclass="main-spinner "> 
2 <div> <img src="images/cycle_09/34.jpg" alt=""” /> <! 定义 图 片 --> 
3 <p class="caption"> 新 开 汉 堡 店 </p> <! 定义 图 片 的 解释 文字 - -> 
4. </div> 
SE 省 略 定义 其 他 图 片 的 代码 
司 
7. </div> 
热门 视频 部 分 的 图 片 会 定时 切换 ， 而 且 当 单 击 左右 两 边 的 按钮 时 ， 图 片 也 会 对 应 地 变 
换 ， 这 部 分 的 代码 涉及 到 了 JavaScript， 所 以 不 再 详细 解释 。 
这 里 ， 请 大 家 看 一 下 第 1 行 名 为 main-spinner 的 CSS， 这 段 代码 的 关键 作用 是 定义 这 个 DIV 
的 宽度 和 高 度 ， 代 码 如 下 所 示 。 


1. .main-spinner div { 

height : 358px; // 定 义 高 度 
S width: 521px; // 定 义 宽度 
4. } 


计 i DIV 


pe 在 焦点 讨论 部 分 中 ， 放 置 着 针对 视频 部 分 的 讨论 性 
2010 视 频 网 拓片 全 奖 奥 礼 开场 碑 文字 ， 式 样 并 不 复杂 ， 只 不 过 这 里 的 文字 颜色 是 绿色 ， 
oT 《十 月 国 ) 这 部 分 的 样式 如 图 21-7 所 示 。 

4 月 新 竺 强 克 刘备 及 关注 的 [经 音 ]IL [重要 时 ] [ 合 长 是 女人 大 这 部 分 的 关键 实现 代码 如 下 所 示 ， 由 于 比较 简单 ， 
人 ] 等 可 以 说 是 大 作 云 集 , 人 气 丝毫 不 办 所 以 不 再 分 析 。 


加 果 你 想 了 解 一 喜 车 ， 请 看 这 里 ?如果 你 杷 买 一 雌 车 ， 请 看 这 
里 ?如果 你 想 比 较 N 寺 车， 那么 还 看 这 里 ， 


1. <divid="left-mid"> 

4 <h2 class="explore ir"> 焦 点 讨论 </h2> <! 标题 --> 

85 <P><ahref="#">2010 视 频 网 短片 颁奖 典礼 开场 幕 </a></P> 
4 省 略 其 他 焦点 讨论 部 分 的 文字 

3 


</div> 
这 里 请 注意 第 1 行 中 引用 的 left_mid， 这 个 CSS 定 义 了 DIV 的 悬浮 方式 和 宽度 ， 关 键 代 
码 如 下 所 示 。 


1. #left-mid{ 

2 float : left; // 指 定 靠 左 悬 浮 
< width: 335px; // 指 定 宽度 
et 


搭建 ”推荐 视频 “部 分 的 DIV 


在 首页 中 ， 可 以 把 当前 非常 流行 的 一 个 热门 视频 推荐 作为 热点 ， 用 以 增加 网 站 的 人 气 ， 
这 部 分 的 DIV 效果 如 图 21-8 所 示 ， 它 使 用 了 一 个 大 DIV 套 2 个 小 DIV 的 样式 。 
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推荐 福 拓 部 分 的 DIV 


-errr 
7 
“ 


图 21-8 推荐 视频 部 分 的 DIV 效果 图 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <div class="summergems clear "> 


2. <div class="mapwrap"><img src="images/v300_300.jpg" border="0" alt="" /> 
</div> 


局 <div class="fleft"> 
<h3 class="summergems "> 夏天 的 乐趣 </h3> 


4 

5 <p class="sans smal1"> 省 略 描述 性 文字 </p> 
6 <ul> 
8 


<liclass="riv-on"><ahref="#">River Cruises</a></1i> 
<liclass="mot"><ahref="#">Motorcycle Rides</a></1i> 


9 <liclass="wat"><ahref="#">Water Parks</a></1i> 

10. <liclass="dri"><ahref="#">History Trips</a></1i> 
UIs </ul> 

12: </div> 

13. <div style="clear: both;"></div> 

14. </div> 


其 中 ， 在 第 2 行 的 代码 中 ， 可 以 放置 推荐 的 视频 ， 这 里 我 们 用 一 张 图 片 蔡 代 ， 而 在 第 
6~10 行 里 ， 用 ul 和 li 段落 的 方式 ， 引 入 ”高 清原 创 ”等 部 分 的 链接 。 


GX 搭建 ”近期 新 视频 ”部 分 的 DIV 


在 首页 的 右边 ， 放 置 着 若干 个 近期 新 视频 ”模块 ， 它 也 是 由 一 个 大 DIV 套 诸多 小 DIV 
实现 的 ， 效 果 如 图 21-9 所 示 。 这 部 分 的 关键 代码 如 下 所 示 。 


1. <div id="upcoming-events"> 

2 <h3 class="ue "></h3> 

3 <div class="ea-event event5775 "> 

4 <p><strong class="serif"> 日 期 : </strong> <span>2010/4/16</span><br /> 
5. <a href="#"> 香 港 电影 金 像 奖 </a><br /> 

6 <strong class="serif"> 上 传人 :</strong> <em> 夏 天 视频 </em> </p> 

汶 <ul class="options "> 

8 <li class="lm"><ahref="#" class="1earnmore"> 观 看 视频 </a></1i> 
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9 . <li class="si"><ahref="#" class="sendinvite"> 收 藏 视频 </a></1i> 
10: </ul> 
ale <div style="clear :both;"></div> 
lz </div> 
13. ”这 里 只 给 出 一 个 近期 视频 的 模块 ， 省 略 其 他 近期 新 视频 的 模块 
14. 
15. </div> 
其 中 ， 在 第 3~12 行 ， 定 义 了 一 个 ”近期 新 视 i 
> A 大 的 DIV， 
频 “的 小 DIV， 它 包括 日 期 和 视频 介绍 等 信息 。 a 


上 从 


ETD 


2 


和 搭建 页 脚 部 分 的 DIV 


这 个 视频 网 站 的 页 脚 ， 除 了 有 传统 的 版 权 信息 
外 ， 还 有 一 个 能 动态 切换 的 图 片 ， 大 致 的 效果 如 图 
21-10 所 示 。 这 个 页 脚 的 风格 有 些 ”另类 ， 其 中 导 tt 
航 菜单 部 分 是 放 在 页 脚 的 上 部 。 EI 一 


日 期 : 2 
迪士尼 . 星 级 款待 2 
上 伟人; 夏天 视 炳 


een TD 


日 期 : 
喘 同 博士 提 开 菇 女 包 也 里 的 秘密 
上 传人 : 夏天 视频 


er tenia 


作 PIXELS 像 素 入 侵 文 明 世 界 
ED TD 


更 多 近期 视 


网 


二 图 21-9 近期 新 视频 部 分 DIV 的 效果 


出 


|p 


这 部 分 关键 的 实现 代码 如 下 所 示 ， 代 码 比较 简单 ， 所 以 就 不 再 分 析 了 。 


1. <ul id="inner-footer" class="clearfix"> 

:人 <1i><a href=" index.html"> 首 页 </a> | </1i> 
3 <1i><a href="#"> 视 频 </a> | </1i> 

4. <1i><ahref="#"> 社 区 </a> | </1i> 

人 <1i><a href="#"> 博 客 </a> | </1i> 

6. <1i><a href="#"> 关 于 我 们 </a> | </1i> 

Ls <1i><a href="#"> 联 系 我 们 </a> | </1i> 

8. <1i><a href="#"> 法 律 条 款 </a></1i> 

9 </ul> 


10. <! 这 部 分 是 放 在 DIV 之 上 - -> 

11. <divclass="credits "> 

12. <! 动态 图 片 - -> 

13. <div id="advertlarge"><img src="images/001 .gif" alt="" /></div> 
14. <divclass="mid"> 
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15. <hl><ahref="index.html" class="bgPng"></a></hl1l> 

16. <pclass="sans"><ahref="index.html"> 返 回首 页 >></a></p> 
17. </div> 

18. <! 版 权 声明 --> 

19. <p class="copywrite">&copy;2010 夏天 视频 网 ， 保 留 一 切 权利 </p> 
20. <div style="clear: both;"></div> 

21. </div> 


首页 CSS 效 果 分 析 


在 前 面 描 述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 21-2 所 示 。 


表 21-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div class="mast"> ”| 定义 此 DIV 的 高 度 ， 并 定义 此 

DIV 中 的 对 象 不 可 层 受 

.mast { 


height: 100px; | 
臭 天 | 视频 网 | 
padding: 0; ED 加 


margin: 24px 0 0 0; 


position: relative; 


<ul class="aux-nav"> | 定义 文本 框 里 的 默认 内 容 是 加 粗 
的 


.aux-nav { 


上 人 忧 坑 频 。 联系 我 们 


导航 
list-style: none; 
overflow: visible; 
display: block:; 
z-index: 300; 

} 


<div class="inner"> ”| 定义 标签 卡 中 的 数字 的 内 边 距 相 
同 ， 并 设置 字体 颜色 与 背景 色 
.inner { 

background: url(../ 
images/bg/bg-content.jpg) top left 
no-repeat; 


overflow: visible; 


margin: 0 0 0 0; 
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( 续 表 ) 
DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class= 设置 此 DIV 的 最 低 高 度 ， 当 最 低 
"travelgreen "> 高 度 大 于 现 有 最 低 高 度 时 ， 默 认 
使 用 现 有 高 度 
:travelgreen { 
min-height:345px; ER 
height:auto limportant; 
height:345px; 
> 
<div id= 鼠标 移 上 去 的 图 片 边框 变色 效果 
"desktopfun"> #desktopfun lia { 


display: block; 

border: 5px solid #c8c8c8; 
width: 113px; 

height: 66px; 


21.3 ”在 首页 中 实现 动态 效果 


这 个 视频 网 站 的 首页 中 ， 动 态 效果 是 比较 丰富 的 ， 主 要 集中 在 两 块 ， 第 一 ， 实 现 父 子 菜 
单 的 导航 效果 ， 第 二 ， 实 现 图 片 变换 的 效果 。 这 两 块 效果 都 可 以 用 CSS 实 现 ， 下 面 我 们 就 来 
依次 分 析 一 下 。 


实现 父子 菜单 联动 的 效果 


先 看 一 下 效果 图 ， 当 鼠标 移动 到 导航” 父 菜单 时 ,会 出 现 首页 和 视频 等 子 菜 
单 效果 ， 如 图 21-11 所 示 。 


图 21-11 实现 父子 菜单 的 样式 效果 
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先 来 看 一 下 父子 菜单 部 分 的 HIML 代 码 。 


1. <ul class="aux-nav "> 

<liclass="atn"><a href="#"> 导 航 </a> <! 父 菜单 --> 

二 <ul> 

4. <! 如 下 是 4 个 子 菜单 --> 

二 <li class="summer "><a href="index.html "> 首页 </a></1i> 

6: <liclass="fall"><ahref="motorcycles.html "> 视频 </a></1i> 
es <liclass="winter"><a href="trainlovers.html"> 社 区 </a></1i> 
8. <1li class="spring"><ahref="motorcycles .html "> 博客 </a></1i> 
9 </ul> 

105 <xli> 

he 

l2=<Xuls 


在 上 面 代 码 的 第 2 行 ， 我 们 引入 了 ID 为 atn 的 CSS， 它 的 关键 实现 代码 如 下 所 示 。 


=OO0F0N 人 ON- 


0 


.aux-nav li.atnul{ 


position: absolute; 
top: 40px:; 

z-index: 999; 

left: -9999px; 
width: 230px; 
list-style: none; 
margin: 0; 

padding: 0; 


其 中 最 重要 的 是 第 5 行 ， 指 定 了 子 菜单 位 于 屏幕 左边 的 9999 个 像素 位 置 ， 这 样 ， 在 初始 
状态 下 ， 子 菜单 是 不 显示 的 ; 而 在 CSS 样 式 里 ， 又 定义 了 如 下 的 代码 ， 代 码 的 第 2 行 定义 left 


为 0， 即 在 鼠 


标 移动 上 去 后 ， 会 指定 子 菜单 的 位 置 是 距离 父 菜单 下 方 0 个 像素 ， 这 样 就 能 实现 


鼠标 移动 上 去 显示 动态 子 菜单 的 效果 。 


1. .aux-nav li.atn:hoverul{ 


2: 
3. 让 


left:0; 


实现 图 片 切 换 的 效果 


在 首页 


Ph， 我 们 通过 CSS 样 式 实现 了 一 些 图 片 动态 切换 的 效果 ， 比 如 在 图 21-12 中 ， 左 边 


是 鼠标 移 开 的 效果 图 ， 右 边 是 鼠标 移 上 去 的 效果 图 。 


图 21-12 图 片 切换 效果 图 分 析 


273 


QQ、|DIV+CSS 网 站 布局 案例 精粹 (第 2 版 ) 


274 


这 部 分 的 HTML 代 码 相对 简单 ， 在 一 个 p 标 签 里 ， 引 用 了 ID 为 getvacguide 的 CSS 样 式 。 
<pclass="getvacguide"><a href="#">Get a free vacation guide</a></p> 


上 面 引用 的 CSS 样 式 代码 如 下 所 示 。 


1. p.getvacguideaf{ 

有 width: 185px ; 

站 height: 126px; 

4. margin: 0; 

二 display: block; 

S: background: url(../images/bg-vacguide.jpg) top left no-repeat ;// 设 置 
背景 图 

这 background-position: 00; 

8. overflow: hidden; 

Se 

10. p.getvacguide a:hover { 

a background-position: 0 -126px; 

| 


其 中 ， 第 1~9 行 ， 定 义 的 是 a 标签 的 样式 ， 而 在 第 10 行 ， 定 义 的 是 鼠标 移动 到 a 标签 之 上 的 
样式 。 

从 代码 中 我 们 能 看 到 ， 在 默认 情况 下 ， 会 按 第 6 行 代码 的 要 求 ， 设 置 背 景 图 片 ， 而 当 妃 
标 移动 上 去 以 后 ， 会 按 第 11 行 代码 要 求 ， 设 置 背景 图 片 的 位 置 ， 由 此 实现 图 片 切 换 的 效果 。 


21.4 ”个 人 视频 专辑 页 面 


在 个 人 视频 专辑 页 面 中 ， 将 展示 出 最 热 的 视频 和 视频 列表 ， 使 访问 者 一 目 了 然 。 本 节 将 
分 析 该 页 面 的 特点 ， 与 首页 相同 部 分 就 不 再 说 明了 。 


个 人 视频 专辑 页 面 上 边 部 分 的 DIV 


个 人 视频 专辑 页 面 上 边 部 分 的 DIV 比较 简单 ， 这 里 就 不 再 做 详细 说 明了 ， 只 给 出 效果 ， 
如 图 21-13 所 示 。 


第 21 章 ”精美 绝伦 的 视频 网 站 


人 观点 评论 ， 就 委 国 目前 的 经 济 形势 和 政府 实施 的 禾 助 计 


则 


21-13 社区 页 面 上 边 部 分 DIV 图 展示 


个 人 视频 专辑 页 面 下 边 部 分 的 DIV 


个 人 视频 专辑 页 面 下 边 部 分 是 由 一 个 大 DIV 里 包含 有 多 个 小 DIV 组 成 的 视频 列表 ， 这 个 
DIV 比较 简单 ， 其 效果 如 图 21-14 所 示 。 


下 面部 分 DIV: 
在 一 个 DIV 里 面 


图 21-14 个 人 视频 专辑 页 面 下边 部 分 DIV 图 展示 


实现 此 部 分 的 DIV 代码 如 下 所 示 。 


1. <div id="medialist-wrap"> 

2 <div class="topside"> 

3 <div class="each-media leftside"><ahref="#"> 

4 <img src=" images/video/summertime.jpg" /></a> 

加 <p><a href="#"> 夏 季 音 乐 会 直播 </a> 

6 <span class="sans "> 发布 于 2010/5/1</span></p> 

学 </div> 

8 <div class="each-media"><ahref="trainlovers.html"> 
号 <img src="images/video/train-1lovers.jpg”/></a> 
<p><a href="trainlovers.html"> 爱 之 旅 </a> 

站 <span class="sans "> 发 布 于 2010/5/1</span></pP> 


[本 
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2 </div> 

13 <div style="clear: both; float: none; padding: 0;"></div> 
14. </div> 

15: 

16. </div> 


上 面 代码 表明 每 两 个 DIV 组 成 的 一 个 版 块 ， 其 中 关键 是 第 3 行 和 第 8 行 应 用 的 一 个 CSS， 
其 代码 如 下 所 示 。 


1 .each-media{ 
width: 180px; 
| height: 150px; 
4. padding: 10px; 
6 


background: url(../images/bg/bg-each-reel .gif) top leftno-repeat ; 
上 


上 述 代码 中 ， 第 2、3、4 行 分 别 定义 了 里 面包 含 的 小 DIV 的 高 度 、 宽 度 和 边框 距离 这 几 个 
属性 ， 从 而 使 这 个 视频 列表 看 上 去 美观 大 方 ， 有 整体 感 。 


色彩 缤纷 的 图 片 网 站 


计算 机 和 互联 网 通讯 技术 的 飞速 发 展 ， 尤 其 互联 网 的 迅速 普及 和 应 用 ， 
使 得 处 于 地 球 上 任何 角落 的 两 个 人 只 要 通过 一 台 能 上 网 的 计算 机 就 可 以 联系 
在 一 起 ， 甚 至 面对面 地 交谈 。 

这 就 为 图 片 网 站 的 迅速 发 展 创造 了 极 好 的 条 件 。 在 这 种 情况 下 ， 图 片 网 
站 与 世界 各 地 的 摄影 师 和 客户 进行 互动 。 作 为 摄影 师 可 以 把 自己 拍摄 的 已 经 
数字 化 ( 数码 相机 拍摄 或 者 扫描 ) 的 作品 按照 要 求 通过 互联 网 上 传 给 图 片 网 
站 ; 而 作为 客户 ， 当 注册 成 为 图 片 库 网 站 的 用 户 后 ， 可 以 通过 专用 的 图 片 搜 
索 工 具 ， 在 图 片 库 的 众多 资源 中 寻找 到 自己 需要 的 图 片 ， 然 后 下 载 使 用 。 


22.1 ”网 站 页 面 效 果 分 析 


这 个 图 片 网 站 的 风格 是 本 身 色 彩 的 单元 化 ， 图 片 网 站 的 图 片 本 身 色 彩 就 很 丰富 ， 所 
以 在 搭建 的 过 程 中 就 不 能 再 添加 很 多 的 色彩 ， 以 致 网 站 页 面 看 上 去 很 凌乱 ， 这 就 对 图 片 的 显 
示 风 格 有 了 很 高 的 要 求 。 

在 本 章 中 ， 将 着 重 分 析 首页 、 最 新 图 片 页 面 和 业界 新 闻 ”页面 的 设计 样式 ， 
而 ”最 新 动态 ”页面 风格 与 ”业界 新 闻 页 面 ” 非 常 相似 ， 就 不 做 分 析 ， 这 部 分 的 代码 请 大 家 
行 从 与 本 书 配套 的 下 载 资源 中 获取 。 


《ZE 首页 效果 分 析 


片 网 站 的 首页 效果 如 图 22-1 所 示 ， 它 是 一 个 两 行 的 布局 样式 ， 在 第 一 行 里 ， 分 别 用 两 
列 放置 网 站 的 导航 部 分 和 网 站 内 容 。 在 第 二 行 里 ， 放 置 了 网 站 页 脚 部 分 的 内 容 ， 比 如 版 权 声 
明 等 。 
在 第 一 行 框架 里 ， 包 容 了 图 片 网 站 的 主体 部 分 ， 它 是 个 两 列 的 效果 ， 第 一 列 包 括 网 站 导 
航 、 推 荐 会 员 图 片 和 友情 链接 这 几 个 部 分 ， 第 二 列 包括 网 站 Logo、 推 荐 会 员 图 片 展示 和 网 
站 特色 三 部 分 内 容 。 


QQ、|DIV+CSS 由 布局 案例 精粹 (第 2 版 ) 
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图 22-1 首页 的 效果 图 


最 新 图 片 页 面 的 效果 分 析 


最 新 图 片 页 面 大 致 ] 


将 友情 链接 部 分 放 弄 


上 也 采用 了 两 行 的 样式 ， 在 第 二 行 里 我 们 对 页 脚 做 了 小 部 分 的 改动 ， 


页 脚 里 面 去 了 。 在 第 一 行 里 ， 包 含 了 两 个 大 列 ， 第 一 列 的 上 半 部 分 与 首 


页 一 样 放置 导航 部 分 ， 下 半 部 分 却 改 为 图 片 分 类 ;第 二 列 用 大 量 的 、 靓 丽 的 图 片 突出 了 最 


图 片 的 


这 个 主题 。 


最 新 图 片 


大 量 的 图 片 来 显示 这 一 特色 ， 这 个 页 面 使 用 DIV+CSS 的 布局 方式 来 构建 


展示 效果 ， 如 


图 22-2 所 示 。 


第 22 章 ”色彩 缤纷 的 图 片 网 站 


Em © 业界 新 闻 周 原创 视频 BE ET 


图 22-2 最 新 图 片 页 面 的 效果 图 


CR 网 站 文件 综述 


在 这 个 网 站 中 ， 除 了 上 文 里 提 到 的 首页 和 图 片 展示 页 面 外 ， 还 需要 包含 ”最 新 动态 页 


面 、 业界 新 闻 页面， 而 这 些 页 面 中 所 用 到 图 片 、CSS 文 件 和 JavaScript 代 码 ， 将 分 别 放 置 


在 image、css 和 jscript 


录 里 ， 文 件 及 其 功能 如 表 22-1 所 示 。 
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表 22-1 图 片 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
pic-show.html 最 新 图 片 页 面 
news_list.html 最 新 动态 页 面 
news_item.html 业界 新 闻 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
jscript 目 录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
image 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


22:2 规划 首页 的 布局 


设计 这 类 网 站 的 基本 方法 是 : 先 用 DIV 构建 总 体 框 架 ， 随 后 再 细 分 各 个 模块 的 效果 ， 最 
后 用 CSS 和 JS 实现 动态 的 效果 。 本 节 我 们 分 析 一 下 首页 重要 DIV 的 实现 方式 。 


搭建 首页 第 一 行 的 DIV 


页 采用 两 行 的 样式 ， 其 中 第 一 行 是 网 站 的 主体 部 分 ， 采 用 了 两 列 的 样式 ， 其 效果 如 图 
22-3 所 示 。 


图 22-3 首页 第 一 行 的 DIV 设 计 分 析 


四 


用 第 22 章 “色彩 缤纷 的 图 片 网 站 


首页 主体 部 分 这 个 大 块 中 包含 了 多 个 DIV， 下 面 我 们 就 依次 分 析 每 个 DIV 的 构建 方法 。 
第 一 ， 构 建 ” 首 页 注册 登录 部 分 的 DIV， 其 关键 代码 如 下 所 示 ， 代 码 比 较 简 单 ， 所 以 
不 做 分 析 。 


1. <div id="nav_language "> 

<ahref="#"> 首 页 </a> <! 首页 的 超 链 - -> 
3. 省 略 其 他 超 链 代 码 
4. 
5 


<a href="#"> 登 录 </a> <! 登录 超 链 - -> 
6. </div> 
第 二 ， 构 建 ” 导 航 ”部 分 的 DIV， 关 键 代码 如 下 所 示 ， 主 要 使 用 ul 和 li 等 控制 段落 的 标签 
来 编排 导航 文字 。 


1. <divclass="box" id="navigation"> 

2 <ul id="fid0" class="nlevell"> 

总 <li id="pl" class='active pageactive'><ahref="#"> 首 页 </a> </1i> 

4 省 略 其 他 链接 部 分 的 编码 

"</ul> 

6. </div> 

第 三 ， 构 建 左边 第 三 行 的 DIV 块 ， 现 在 我 们 放 的 是 图 片 ， 这 块 也 能 播放 视频 ， 关 键 代码 


1. <divclass="box" id="spalte_aktuelles"> 

2 <h3><a href="pic-show.html"> 可 爱 的 一 天 </a></h3> 

3. <! 这 里 是 图 片 --> 

4. <img height="100" width="188" src="image/pictures/pic_aktuelles.jpg" 
alt="Stimmungsbild zumaktuellen Thema" /> 

5. ”省 略 这 模块 的 其 他 代码 

6. 

Ts /dv 


请 注意 ， 在 上 面 代码 第 1 行 里 我 们 引入 了 ID 为 spalte_aktuelles 的 CSS， 这 个 CSS 的 关键 代 
码 如 下 所 示 ， 由 此 定义 了 这 个 DIV 的 宽度 和 高 度 等 属性 。 


padding: 4px 5px 6px 8px; /* 声 明 内 边 距 */ 

margin: 9px 00 15px; /* 声 明 外 边 距 */ 

height : 285px; /* 声 明 高 度 */ 

width: 183px; /* 声 明 段 度 */ 

background- image: url(. ./image/back_aktuelles.jpg) ; /* 定 义 背景 图 片 */ 


1. #spalte_aktuelles{ 
" background-repeat: repeat-x; 


2 
3 
4 
5 
6 
8. } 


第 四 ， 构 建 第 三 行 第 二 列 里 包含 多 个 图 片 的 DIV， 这 部 分 由 四 张 图 片 组 成 ， 我 们 就 给 出 
一 张 图 片 的 DIV， 其 他 三 张 的 效果 可 以 采用 复制 粘贴 的 方式 实现 ， 关 键 代码 如 下 所 示 。 


1. <div id="rahmen eins"> 
2. <divclass="orange" id="startboxl" onMouseOver="this.className= 
2 box_hover_orange ;" onMouseOut="this.className= orange  ; "> 
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4. <div class="boxenhoehe2 "> 

5. <h3><a href="pic-show.html"> 有 创意 的 熊猫 </a></h3> 

6. <ahref="#"><imgborder="0" src="image/pictures/pic_PR.jpg" /></a> 

7. <p><ahref="" title="Park&amp;Ride" class="box_pfeil"> 新 体验 ， 新 创意 </a><br 
炎 芝 

BE 我 很 厉害 吧 ? <br /> 

9. </p> 

10. </div> 

11: </div> 


请 注意 一 下 上 面 第 2 行 的 代码 ， 它 包含 了 onMouseOver 和 onMouseOut 两 个 属性 ， 用 来 定义 
鼠标 移 上 和 移 开 的 效果 ， 这 部 分 的 代码 将 在 后 面 详细 说 明 。 

到 此 为 止 ， 我 们 已 经 给 出 了 首页 主体 部 分 主要 DIV 的 代码 ， 而 忽略 了 一 些 次 要 DIV 的 代 
码 ， 完 整 的 代码 可 以 到 与 本 书 配 套 的 下 载 资 源 中 获取 。 


搭建 页 脚 部 分 的 DIV 


这 个 图 片 网 站 的 页 脚 部 分 比较 简单 ， 大 致 的 效果 如 图 22-4 所 示 ， 它 使 用 大 DIV 套 两 个 小 
DIV 实 现 的 。 


图 22-4 页 脚 部 分 的 DIV 设 计 


实现 这 部 分 的 代码 如 下 所 示 。 


1. <div id="footer"> 

<div id="nichts"> 

3 <div id="sponsoren"> 

4 <h3> 版 权 声 明 </h3> <! ”声明 版 权 - -> 

<p> 图 片 网 &copy ;2010 版 权 所 有 </p><! 声明 版 权 - -> 
6 </div> 

<div id="banner"> 

8 


<! 这 里 用 图 片 的 形式 定义 超 链 - -> 


9. <p><a href="http://www.zoo.ch/Agenda"> 

10: <img src=" image/pictures/banner_agenda.gif"/></a></p> 
‘i 省 略 其 他 部 分 的 超 链 代码 

V2 

Le <!-- ende Footer --> 


值得 注意 的 是 上 面 代码 的 第 9 行 ， 通 过 图 片 的 形式 给 出 了 ”作者 博客 部 分 的 超 链 ， 而 
其 他 部 分 的 超 链 和 这 个 很 相似 ， 就 不 再 重复 说 明 。 
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il 第 22 章 色彩 缤纷 的 图 片 网 站 


7 了 也 首页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 冯 


分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 


描述 首页 中 其 他 CSS 的 效果 ， 如 表 22-2 所 示 。 


表 22-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 


效果 图 


<div id="shadow"> 设置 第 一 行 的 DIV 宽度 ， 并 
设置 这 个 DIV 的 背景 图 片 ， 
背景 图 的 开始 位 置 为 右边 ， 
此 背景 图 像 只 显示 一 次 
#shadow { 

width: 872px; 


background-image: 


url(../image/shadow.jpg); 
background-repeat: 
no-repeat; 
background- 
position: top right; 


margin: auto; 


<div class="box"| 定 义 导 航 栏 里 鼠标 移 上 去 不 
同 的 栏目 显示 不 同 的 颜色 


.box_hover_rot { 


id="navigation"> 


background-color: 
#e34040; 


} 
‘box_hover_orange { 

background-color: 
#ff8c64; 
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( 续 表 ) 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<h3><a href="pic-| 当 <h3> 标 签 和 <a> 标 签 一 起 


show.html"> 可 爱 的 一 | 用 的 时 候 ， 将 会 自动 设置 一 
天 </a></h3> 个 CSS， 此 CSS 的 效果 如 右 
图 


.startseite h3 a{ 

color: #fff limportant; 

display: block; 
text-decoration: none; 
height: 1%; 

} 

.startseite h3 a:hover { 
background-image: i YY 

url(../image/h3_pfeil_hover. 

gif); 


background-repeat: no- 


repeat; 


<div id="banner"> 在 此 DIV 中 ，<p> 标 签 也 是 行 
显示 
#banner p { 

display: inline; 


margin-right: 5px; 


22.3 ”首页 CSS 效 果 分 析 


在 首页 中 ， 我 们 用 CSS 实 现 了 两 个 亮点 效果 ， 第 一 ， 实 现 了 文字 变色 ”的 效果 ， 第 
二 ， 实 现 了 导航 部 分 的 动态 效果 。 


更 改 字体 的 实现 方式 
更 改 字体 的 效果 是 : 在 图 片 部 分 中 ， 当 鼠标 移 上 去 时 ， 文 字 会 变色 ， 当 把 鼠标 移 开 时 ， 


将 
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文字 会 变 成 另外 一 种 颜色 ， 效 果 如 图 22-5 所 示 。 


> 


™ 了 A 
下 ? | 
鼠标 黎 上 去 时 的 效果 “外 


图 22-5 动态 更 新 网 站 字体 的 示意 图 


为 了 实现 更 改 字体 的 效果 ， 我 们 首先 需要 在 这 部 分 的 DIV 中 引入 CSS 样 式 ， 关 键 代 码 如 
下 所 示 。 


1. <div class="orange" id="startboxl”onMouse0ver= "this.className = box_ 
hover_orange ;" onMouseOut="this.className= orange ;"> 

入 <div class="boxenhoehe2"> 

s <h3><a href="pic-show.html"> 有 创意 的 熊猫 </a></h3> 

4. <ahref="#"> 

3. <img border="0" src="image/pictures/pic_PR. jpg" alt="Park&amp;Ride" 
/></a> 

局 肖 <p><ahref="" title="Park&amp,;Ride" class="box_pfeil"> 

1 新 体验 ， 新 创意 </a><br /> 

EE 我 很 厉害 吧 ? <br /> 

el </p> 

10. </div> 

11. <div> 


上 面 代 码 中 ， 第 一 行 引用 的 CSS 为 orange， 当 鼠标 移 上 去 时 ， 会 引发 更 换 现 有 的 CSS， 从 
而 达到 改变 字体 颜色 ， 更 换 背 景 图 片 这 一 效果 。 
这 个 CSS 的 实现 代码 如 下 所 示 。 


<-- 这 是 现 有 css 代 码 ， 也 是 鼠标 移 开 后 css 代 码 - -> 


二 
2. .orange{ 

3 background-color : #ff8c64:; 

4 background- image: url(../image/box_orange.jpg):; 
号 = background- repeat: no-repeat ; 
6 

了 

8 


background-position: bottom; 


<-- 这 是 鼠标 移 上 去 后 的 css 代 码 - -> 


ee] 


.box_hover_orange { 
L105 cursor: pointer; 
ll color: #fff Limportant ; 
le background-color : #ff8c64; 
3 background- image: none; 
I 


上 面 第 6 行 代 码 定义 了 这 个 背景 图 只 显示 一 次 ， 而 第 5 行 的 代码 就 定义 了 这 个 背景 图 不 会 


被 拉 伸 。 而 鼠标 移 上 去 后 ， 就 是 使 用 了 第 9~14 行 的 CSS 代 码 ， 其 中 第 13 行 定义 了 这 个 CSS 不 
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会 使 用 背景 图 ， 而 只 使 用 第 12 行 的 背景 色 。 
特别 要 注意 的 是 第 10 行 的 代码 ， 它 将 鼠标 变 为 手 型 ， 在 不 使 用 超 链 的 情况 下 ， 这 个 属性 
是 非常 实用 的 。 


《导航 栏 动态 效果 


导航 栏 上 的 效果 是 当 每 次 鼠标 移 到 不 同 的 导航 项 上 时 ， 文 字 和 背景 会 变 成 不 同 的 颜色 ， 
如 图 22-6 所 示 。 


十 上 一 WL 


图 22-6 导航 栏 动态 效果 示意 图 示意 图 


我 们 可 以 通过 下 面 的 代码 ， 实 现 导航 栏 动态 效果 。 


1. <divclass="box" id="navigation"> 

2 <ul id="fid0" class="nlevell"> 

3 <li id="pl" class= active pageactive ><ahref="#"> 首 页 </a></1i> 
:对 <1li id="p2" > <a href="pic-show.html"> 最 新 图 片 </a> </1i> 

5: <1li id="p3" > <ahref="#"> 作 者 博客 </a> </1i> 

6 <1li id="p4" ><ahref="news_list.html"> 最 新 动态 </a> </1i> 

TT <1li id="p5" > <ahref="news_item.html"> 业 界 新 闻 </a></1i> 

8 </ul> 

9. </div> 


上 面 代码 的 重点 是 ul 引用 了 一 个 名 为 nlevell 的 CSS， 这 个 CSS 实 现 了 鼠标 移 上 去 颜色 会 变 
化 、 文 字 前 面 会 多 个 箭头 图 片 的 效果 ， 实 现代 码 如 下 所 示 。 


1 

2. *html #navigationul li#p5a:hover, 

3 

4. { 

Ss color: #c83264; 

:请 background- image: url(../image/pfeil_purpur .gif) ; 

了 background-repeat : no-repeat : 

8 . background-position: 0 50%:; 

9. background-color :#fff: 

10. } 

于 

因为 定义 的 CSS 代 码 很 多 ， 我 们 在 上 面 只 给 出 图 22-6 所 示 效 果 的 代码 ， 下 面 我 们 解释 一 
下 这 些 代码 。 

在 HTML 代 码 中 定义 了 ID 为 navigation 的 DIV，1i 标 签 的 ID 为 p5， 当 鼠标 移 到 它 的 上 面 ， 


就 会 引发 上 面 的 CSS， 从 而 实现 了 导航 栏 动态 效果 ， 这 里 要 注意 的 就 是 * html #navigation 


ul li#p5 a:hover ， 如 果 


ID， 从 而 达到 代码 重复 使 用 的 。 


第 22 章 ”色彩 缤纷 的 图 片 网 站 


很 多 地 方 用 到 了 这 个 样式 ， 可 以 在 这 个 后 面 加 上 逗号 ， 继 续 定义 i 的 


这 里 要 注意 的 就 是 第 8 行 的 代码 ， 它 的 意思 是 把 这 个 背景 图 片 从 最 左边 开始 ， 按 比例 压 
缩 百 分 之 五 十 ， 因 为 第 7 行 的 效果 ， 这 个 图 片 没有 被 拉 伸 ， 因 此 就 实现 了 上 图 所 示 的 效果 。 


22.4 ”最 新 图 片 页 面 


在 最 新 图 片 页 面 中 ， 显 示 出 一 批 最 新 上 传 的 精美 图 片 ， 让 网 友 有 兴趣 继续 浏览 相关 网 
页 。 本 节 我 们 将 分 析 该 页 面 的 特点 ， 与 首页 相同 部 分 就 不 再 说 明 。 


最 新 图 片 页 面 左 边 下 半 部 分 的 DIV 


最 新 图 片 页 面 的 导航 部 分 与 首页 是 相同 的 ， 我 们 就 不 做 重复 的 
说 明了 ， 直 接 来 看 下 半 部 分 的 布局 。 
这 里 我 们 需要 实现 如 下 的 特色 : 第 一 ， 一 个 DIV 里 包含 有 多 个 


分 类 ， 可 以 使 用 DIV 布局 的 方式 来 实现 ， 第 二 ， 每 个 分 类 之 间 的 间 


隔 相 等 并 且 每 个 分 类 下 面 都 有 虚线 ， 当 鼠标 移 开 和 鼠标 移 上 去 时 字 
体 颜色 会 变 ， 效 果 如 图 22-7 所 示 ， 这 里 我 们 可 以 使 用 CSS 的 方式 来 mom 


上 图 只 用 了 一 个 DIV， 但 是 用 了 多 个 i， 每 个 i 下 面 都 有 虚线 ， 并 


且 分 类 字体 颜色 会 改变 。 实 现 这 个 效果 的 关键 代码 如 下 所 示 ， 请 注意 4 
其 中 第 1 行 里 引入 了 ID 为 unternavigation 和 CLASS 为 box 的 CSS 样 式 。 图 22-7 CSS 效 果 展 示 


. <div id="unternavigation" class="box"> 


1 

2 <ul id="fidl" class="nlevel2"> 

党 <1li id="p69" > <a href="#"> 体 育 图 片 </a> </1i> 
4. <1li id="p78" ><a href="#"> 搞 笑 图 片 </a></1i> 
5 <1li id="p79" ><a href="#"> 原 创 图 片 </a></1i> 
6 

有 </ul> 

8. </div> 


为 了 节省 篇 幅 ， 我 1 


门 这 里 只 给 出 小 部 分 的 分 类 代码 。 在 实现 时 ， 将 引入 CSS 的 ID， 通 过 


第 1 行 引用 ID 为 unternavigation 和 CLASS 为 box 的 CSS， 实 现 鼠 标 移 上 去 字体 变色 的 效果 ， 每 条 


分 类 下 面 都 有 虚线 ， 其 


字体 改变 颜色 的 CSS 部 分 实现 代码 如 下 所 示 。 


.box_hover_rot af 


le 
2 color: #000 
3 


而 每 个 分 类 下 都 有 虚线 的 CSS 代 码 如 下 所 示 。 
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@ IDIv+css 网 站 布局 宗 例 梢 注 (第 2 乒 ) > = 抹 ，ou3 > 


1. #unternavigationullif{ 
二 padding: 5Spx 0; 
Se background- image: url(../image/unav_linie.gif): 
4 background-repeat: no-repeat ; 
3 background-position: 0 bottom; 
So 
上 述 代 码 中 ， 字 体 改 变 颜色 、 用 虚线 做 背景 图 ， 这 些 效果 的 实现 方式 其 实 和 前 文 介绍 的 是 
一 样 的 。 需 要 注意 的 就 是 字体 颜色 的 修改 和 图 片 的 更 换 ， 不 可 再 使 用 前 面 的 颜色 、 图 片 。 
这 里 请 大 家 关注 第 5 行 的 代码 “background-position: 0 bottom; ， 它 的 作用 就 是 把 虚线 背 
景 图 的 位 置 设置 在 分 类 的 下 方 ， 使 分 类 永远 在 其 上 。 


最 新 图 片 页 面 右边 部 分 分 成 两 部 分 ， 上 半 部 分 横幅 广告 或 网 站 Logo， 下 半 部 分 是 图 片 展 
示 区 域 ， 下 面 我 们 来 一 一 说 明 。 
上 半 部 分 的 DIV 效果 如 图 22-8 所 示 ， 因 为 比较 简单 这 里 就 不 再 做 详细 说 明了 。 


图 22-8 最 新 图 片 右边 上 半 部 分 的 展示 效果 


接 下 来 介绍 下 半 部 分 的 DIV， 下 半 部 分 
的 DIV 包含 了 两 个 分 类 的 图 片 ， 所 以 整个 页 
面 看 起 来 比较 饱满 ， 其 效果 如 图 22-9 所 示 。 
< 半 部 分 DIV 的 实现 代码 如 下 所 示 。 


图 22-9 最 新 图 片 右边 下 半 部 分 展示 效果 
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il <div id onalE 

2. ”<h2> 原 创 图 片 </h2> 

二 

4. </div> 

其 中 第 1 行 引用 了 一 个 名 为 inhalt 的 CSS， 这 部 分 CSS 定 义 了 图 片 之 间 的 行 间 距 ， 其 实现 
代码 如 下 所 示 。 

1. #inhalt { 

之 font-size: 12px; 

EE line-height: 18px; 

4. } 

因为 这 部 分 的 代码 比较 简单 ， 所 以 就 不 再 做 详细 分 析 了 。 
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精美 的 糖果 公司 网 站 


公司 网 站 的 特点 是 要 突出 自己 产品 的 特色 ， 用 文字 、 视 频 和 图 片 等 方 
式 向 访问 者 展示 本 公司 和 本 公司 产品 的 特点 ; 公司 网 站 的 另外 一 个 重要 特点 
是 ， 要 让 访问 者 能 清晰 地 看 到 公司 的 联系 方式 和 合作 意向 说 明 ， 这 样 才能 起 
到 招 览 客户 和 合作 伙伴 的 效果 。 本 章 我 们 将 介绍 一 个 经 营 糖果 的 公司 网 站 。 


23.1 ”网 站 页 面 效 果 分 析 


糖果 公司 网 站 的 功能 包含 两 大 方 
所 以 这 个 网 站 采 


的 投资 意向 ， 


， 第 一 是 让 访问 


者 的 购买 欲望 ， 


的 风格 


竺 点 是 : 第 


和 视频 ， 充 分 展 也 
招商 “等 信息 。 


在 本 章 中 ， 将 着 重 
虽然 包含 的 内 容 比较 


公司 的 糖果 产品 ; 


分 析 首 页 和 ”视频 展示 
丰富 ， 色 彩 搭配 也 比较 合适 


就 不 做 详细 分 析 了 。 


《REN 首页 效果 分 析 


糖果 公司 


式 。 
在 首页 上 半 
行 的 左 侧 ， 


日 


网 站 的 首页 
较 长 ， 分 为 两 部 分 描述 ， 图 23-1 


放置 了 公司 的 Logo、 


第 二 ， 页 面 可 以 足够 长 ， 全 方位 地 展 


eae 


浅 色 调 ， 外 加 大 量 篇 幅 的 糖果 


展示 ”公司 介绍 


采 


设计 样式 ， ”公司 介绍 部 分 的 
于 样式 和 前 两 个 页 面 非常 相似 ， 


于 包含 的 内 容 比 较 多 ， 故 采 


加 | 


所 


了 六 行 的 布局 样式 。 首 页 页 


展示 了 页 面 上 半 部 分 的 三 行 样式 ， 图 23- 


2 展示 了 后 三 行 


下 
的 


页 面 


第 二 是 吸引 合作 方 


片 
和 


比 
样 


分 中 ， 第 一 行 在 一 张 渐变 的 背景 
公司 的 介绍 ， 
模块 化 的 方式 展示 公司 信息 和 


到 


到 片上 ， 放 置 了 公司 


A 


的 导航 信息 ;在 


在 第 二 行 的 右 侧 ， 放 置 了 


频 ; 在 第 三 行 里 ， 


在 首页 下 半 商 


分 中 ， 第 四 行 


有 


两 列 的 形式 ， 分 别 


描述 公司 信息 
品 特点 。 
展示 了 招商 ”信息 和 ”甜品 


信息 


长 烛 


ZN\3 


而 在 第 五 行 里 ， 放 置 了 广告 信息 


信息 和 招聘 信息 。 


; 在 最 后 


行 里 ， 


黑 底 


字 的 方式 ， 突 出 了 页 脚 中 的 公司 


第 23 章 ”精美 的 糖果 公司 网 站 


关于 我 们 。 个 关于 莹 果 的 小 知识 


产品 里 示 。 符 司 简介 。 联系 委 们 


我 们 的 价值 观 。 资质 认证 市场 营 销 ”信息 反馈 。 人 才 招聘 


糖 类 有 限 公司 司 是 糖果 业界 公认 的 
领导 者 之 一 全 球 最 大 的 食品 公司 之 一 


无 著 口 香 烙 


010 年 突破 30 亿 美 


网 
昌 


23-1 首页 上 半 部 分 的 效果 


和 我 们 一 起 ， 开 创 未 来 性 第 四 行 放置 招商 部 分 信息 
和 大 尺 


入 ，“ 字 时 公 
后 粒 ， 共 南天 下 的 明知 选择 8388 嫩 工房 姑 时 看 限 公 


第 五 行 放置 “申请 免费 
试 吃 "的 广告 


果 ， 可 不 要 错过 陶 ! 人 CE 


第 六 行 放置 页 脚 ， 其 中 包 
含 版 权 信息 和 招聘 信息 


网 


四 


23-2 首页 下 
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视频 展示 页 面 的 效果 分 析 


视频 展示 页 面 主要 使 用 视频 这 种 动态 的 方式 ， 向 访客 展示 公司 的 产品 。 

这 个 页 面 采 用 了 四 行 的 样式 ， 第 一 、 第 三 、 第 四 行 的 样式 与 首页 相似 ; 在 第 二 行 里 ， 
包含 了 两 个 大 列 ， 第 一 列 是 视频 的 导航 列 ， 而 第 二 列 是 视频 的 播放 区 。 这 个 页 面 的 样式 如 
23-3 所 示 ， 与 首页 完全 相同 的 部 分 我 们 就 不 再 展示 。 


公司 历史 
第 一 列 ， 展 示 视 第 二 列 ， 展 示 视 
频 的 导航 信息 二” | 须 和 视频 介绍 


学 习 资 料 


网 


常见 问题 -一 
我 们 公司 生产 口味 持久 、 品 所 可 菲 而 稳定 的 口 香 术 和 泡 光 樟 产品 。 生 产 过 程 包括 ， 在 洁净 的 空调 厂房 中 生产 口香糖， 全 球 


环境 与 社会 责任 5 家 工厂 在 接收 任何 原料 之 前 都 进行 严格 取样 检验 ， 等 等 。 原 料 通过 品质 检验 合格 之 后 ， 第 一 道 工序 就 开始 了 。 
5 社会 责 


新 闻 中 心 
oD OOOON) 


入 拉 以 信任 、 也 天 与 和 蕴 六 人 


机 相 六 天 化 ， 以 机 其 于 入 条 取 村 

jan 

重光 、 北 帮 和 匀 人 时 住人 才 
二 捕 由 由 汪 习 向 个 全 条 成 从 和 演 必 


自己 曾 


我 们 弄 昌 每 位 只 工 者 多 质 示 第 
页 p> 汗 百 年 来 世界 各 地 的 人 们 都 爱 别 一 些 自 杖 物质 ， 比 如 从 鞭 些 树种 上 裔 出 的 树脂 和 和 乳胶， 以 及 各 种 甜 草 、 树 叶 、 份 粒 和 是 
质 。 几 个 世纪 以 来 ， 古 希 腾 人 就 受 噬 一 种 乳香 树 腾 。 这 种 物质 是 由 一 种 主要 见 千 希 内 和 土耳其 的 乳 兰 树 的 树 皮 车 腾 所 形成 


此 活 中 免 下 了 有 压力 ， 管 理 日 常 的 紧张 情绪 可 能 就 像 咀 明 口香糖 一 样 简单 ， 一 项 研究 显示 ， 口 香 托 咀嚼 者 在 咀 吸 口 香 糖 时 
处 理 日 常 压力 更 晨 平静 和 放松 。 


图 23-3 视频 展示 页 面 的 效果 图 


《REN 网 站 文件 综述 


在 这 个 网 站 里 ， 包 含 了 首页 、 视 频 展 示 页 和 公司 介绍 页 ， 而 这 些 页 面 中 所 用 到 图 片 、 
CSS 文 件 和 JS 代码 ， 将 分 别 放置 在 images、css 和 js 目录 里 ， 文 件 及 其 功能 如 表 23-1 所 示 。 
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一 第 23 章 “精美 的 糖果 公司 网 站 


表 23-1 糖果 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
vedio.html 视频 展示 页 面 
jie-html 公司 介绍 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


23.2 ”规划 首页 的 布局 


首页 的 样式 比较 复杂 ， 分 为 6 行 ， 本 节 我 们 分 别 分 析 各 个 重要 DIV 的 实现 方式 ， 以 及 DIV 


和 CSS 搭 配 使 


的 要 点 。 


《搭建 首页 页 头 的 DIV 


产品 展示 公司 简介 


联系 我 们 关于 我 们 


首页 的 第 一 行 是 页 头 ， 其 中 包含 了 网 站 的 导航 菜单 ， 页 头 的 效果 如 图 23-4 所 示 。 


个 关于 种 果 的 小 知识 


放置 导航 来 、 
单 的 DIV 


实现 页 头 部 分 的 关键 代码 如 下 所 示 。 


图 23-4 首页 页 头 的 DIV 设 计 分 析 图 


我 们 的 价值 观 ”资质 认证 ”市场 营 销 ”信息 反馈 。 人 才 招 聘 


1. <divclass= "grid_12"> 

到 <ul class= "top_nav "> 

3 <liclass="1ink_twitter"><ahref="jie.html"> 关 于 糖果 的 小 知识 </a></1i> 
4. <liclass="1ink_blog"><a href="video.html"> 关 于 我 们 </a></1i> 

BE <liclass="1ink_contact"><ahref="jie.html "> 联系 我 们 </a></1i> 

6 <liclass="1ink_company "><a href="jie.html "> 公司 简介 </a></1i> 

<1li class="1ink_support"><ahref="video.html"> 产 品 展示 </a></1i> 

8 </ul> 

9. </div> 


请 注意 ， 在 第 3~7 行 文字 放置 的 次 序 和 页 面 上 显示 的 次 序 是 相反 的 ， 这 个 原因 是 ， 在 第 2 


有 引入 的 top_nav 这 个 CSS 代 码 


Ph， 指定 了 悬浮 方式 为 靠 右 (float:right》: 


.top_nav li {float: right; list-style: none; padding: 6px O00 5px; } 
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@、 |DIV+CSS 网 站 布局 案例 精 桩 (第 2 版 ) 


搭建 ”公司 介绍 ”部 分 的 DIV 


公司 介绍 部 分 的 DIV 包 括 了 公司 Logo、 公 司 介绍 和 背景 图 片 等 要 素 ， 效 果 如 图 23-5 所 示 。 


ED en 


糖 类 有 限 公司 司 是 糖果 业界 
领导 者 之 一 全 球 最 大 的 食品 公 


糖 、 软 糖 以 及 标 棒 糖 等 多 样 化 产品 。 公 司 在 超过 40 个 国家 开展 业务 ， 

而 闻名 于 世 的 品牌 产品 行销 180 多 个 国家 在 美国 ， 是 始 创 于 

1922 年 的 私营 家 族 企业 。 是 全 球 最 大 的 食品 公司 之 一 ， 年 营业 额 100 亿 
二 吕 这 的 过 品 ， 活 羡 包括 蛋糕 、 巧 克 力 、 饮 料 、 


| 


图 23-5 公司 介绍 部 分 的 DIV 效果 
公司 介绍 部 分 的 关键 实现 代码 如 下 所 示 。 


<div class="grid_3"> 
<hl id="1logo"><ahref="index.html"> 甜 品 工房 </a></h1l> 
</div> 


省 略 部 分 无 关 代码 


<div id="display" class="container"> 
<div class="element" id="element692141_334564"> 
<div class="textElement "> 
9. <h1> 省 略 标题 </h1> 
10. <p> 省 略 文字 </p> 
必 <p class="pt15"><a href="#" class="button_orange_left"> 申 请 免费 试 吃 </ 


125 “</div> 
la 27dive 
14. </div> 


在 上 述 代 码 的 第 2 行 里 ， 我 们 通过 ID 为 logo 的 CSS， 引 入 公司 的 Logo 图 片 ， 这 部 分 的 CSS 
关键 代码 如 下 所 示 ， 在 其 中 的 第 3 行 里 ， 通 过 background:url， 引 入 Logo 图 片 。 


1. #header hl#logoa { 

2. 省 略 其 他 代码 

3. background: url(../images/logo.gif) 00no-repeat; 
A 


在 页 面 代码 的 第 9 和 第 10 行 里 ， 分 别 定义 了 公司 介绍 的 标题 和 内 容 ， 这 里 我 们 省 略 了 代 
码 。 至 于 这 部 分 的 背景 图 片 ， 在 第 6 行 中 引入 了 ID 为 display 的 CSS， 这 部 分 关键 代码 如 下 所 
示 ， 在 这 段 代 码 的 第 3 行 里 ， 也 是 通过 background:url 这 个 属性 指定 了 背景 图 。 
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#display_top{ 


| 

2 

3. background: url(../images/section_top.jpg) 0 top no-repeat ; 
4 


b 


搭建 ”视频 展示 ”部 分 的 DIV 


展示 视频 是 首页 的 一 个 亮点 ， 这 块 占用 的 区 域 比较 大 ， 但 代码 不 复杂 。 请 注意 定义 在 第 
3 行 里 的 宽度 和 高 度 ， 这 里 我 们 使 用 一 张 图 片 蔡 换 视频 。 


1. <divclass="grid_6"> 

2 <div id="flashContent"><a href="#"”title=" 点 击 播放 "> 

3 <img src=" images/videol .jpg" height="259" width="458" /></a></div> 
4 </div> 

n° </divs 


搭建 推广 模块 的 DIV 
这 里 ， 我 们 使 用 了 四 个 风格 类 似 的 DIV 组 成 首页 中 的 推广 模块 ， 效 果 如 图 23-6 所 示 。 


推广 模块 ， 这 行 ~ 
第 四 他， 用 一 个 DV 
is 包含 四 个 推广 模块 


藉 果 公司 ”全球 可 咀 虽 无 乱 口 井 知 
的 价值 观 持续 发 展 的 好 处 最 新 上 市 


基于 我们 的 核心 价值 观 及 高 绩 我 们 相信 ， 我 们 的 持续 路 功 ， 处 已 经 各 道 口香糖 味道 好 ， 能 2009 年 5 月 15 日 ， 富 含 维生素 C 

效 原则 ， 全 球 的 17 500 名 员工 在 很 大 程度 上 有 六 我 们 所 处 清新 口气 ， 但 多 是否 如 道口 得 和 维生素 E 的 “ 根 品 口味 ” 西 

成 功 实现 在 2010 年 突破 30 亿 美 的 全 于 市场 的 芝 介 及 可 导 续 发 着 还 可 归 供 其 他 健康 共处 ? 抽 口 御 无 楼 口 入 全 新 上 市 ， 
展 。 


元 销售 额 。 为 消费 者 带 来 完美 的 全 新 体 
验 。 


图 23-6 公司 推广 模块 的 DIV 效 果 图 


这 个 模块 由 一 个 大 的 DIV 套 四 个 小 的 DIV 实 现 ， 小 的 DIV 的 关键 代码 如 下 所 示 ， 其 中 ， 分 
别 在 第 3 和 第 4 行 里 展示 推广 标题 和 推广 文字 。 


1. <divclass="element" id="element849269_334564"> 

2 <div class="textElement"> 

“二 <h1> 糖 果 公 司 <br /> 的 价值 观 </h1> 

4. <p> 基 于 我 们 的 <a href="#"> 核 心 价值 观 </a> 及 高 绩效 原则 ， 全 球 的 17 , 500 名 员工 成 
功 实 现在 2010 年 突破 30 亿 美元 销售 额 。</p> 

5 风 </div> 

6. </div> 


搭建 招商 部 分 的 DIV 


招商 部 分 由 一 个 大 DIV 套 两 个 小 DIV 实 现 ， 其 中 ， 左 边 是 文字 叙述 ， 右 边 是 图 片 展示 。 
这 里 的 图 片 由 于 引入 了 JQuery 的 代码 ， 打 开 页 面 时 会 出 现 循环 展示 的 效果 ， 这 个 效果 我 们 不 
做 分 析 ， 仅 分 析 DIV 的 样式 ， 这 部 分 的 效果 如 图 23-7 所 示 。 
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这 部 分 放置 循 
环 显示 的 图 片 


攻 你 走 进 五 彩 缤纷 的 威 果 世界 , 另外 ， 
对 传统 产品 加 深 工 艺 、 更 新 包装 、 突 
出 保 键 、 完 美体 羡 . 朴实 的 反映 了 
源 于 自负 ”的 特色 。 我 们 的 产品 多 年 
来 一 直销 福 港澳， 台 ， 美 ， 加 和 中 
东 等 国家 和 地 区 。 只 要 有 售 的 真 城 加 
入 ， “糖果 公司 ”食品 将 是 你 我 共 创 
狂 灯 ， 共 着 天 下 的 明知 选择 


图 23-7 招商 部 分 的 DIV 效果 


这 部 分 的 关键 代码 如 下 所 示 ， 其 中 ， 在 第 2 行 里 ， 定 义 了 左边 推广 文字 的 标题 ， 而 推广 
文字 ， 这 里 是 做 成 图 片 的 方式 ， 用 第 6 行 的 代码 显示 。 

从 第 9-17 行 ， 使 用 JQuery 展 示 了 图 片 循环 显示 的 效果 ， 从 第 13-15 行 ， 我 们 给 出 了 第 一 张 
片 的 代码 ， 而 其 他 图 片 代码 与 第 一 张 的 代码 很 相似 ， 这 里 就 不 再 说 明了 。 


Ee 


到 


1. <div id="rewards" class="container "> 

避 <h1> 和 我 们 一 起 ， 开 创 未 来 吧 ! </h1> 

号 : <div class="grid_3"> 

4. <ahref="#"> 

Se <! 文字 描述 部 分 是 以 图 片 的 方式 显示 - -> 

GE <img src="images/network.jpg" width="220" height="298" 
alt="Network"> 


Te </a> 

8. </div> 

局 <div id="gallery" class="grid_9"> 

VOB <div id="rotator"> 

a <div id=" jQuery "> 

12 5 <! 这 里 展示 循环 显示 的 图 片 - -> 

3 <div id="slidel" class="slide" style=" ka 


14. <img src="images/gallery_item_3.jpg" width="657" height="192" 
alt="Gallery Item1"> 


的 </div> 

16. <! 省 略 其 他 循环 显示 的 图 片 - -> 
Ie </div> 

18. </div> 


搭建 ”免费 试 吃 ” 广告 部 分 的 DIV 


免费 试 吃 广告 部 分 DIV 的 效果 如 图 23-8 所 示 ， 它 的 实现 代码 比较 简单 ， 由 一 个 DIV 包 含 了 
一 张 图 片 现实 。 
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EEC 


图 23-8 免费 试 吃 广告 部 分 DIV 的 效果 


网 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


<div id=s "try it classe’grid 12pE295°> 


<a id="inlineSignUp" href="# ><img src="images/tryit.jpg" /></a> 


</div> 


搭建 页 脚 部 分 的 DIV 


首页 的 底 色 使 用 了 浅 色调 ， 在 页 脚 部 分 就 用 黑色 作为 底 色 ， 形 成 明显 的 反差 ， 使 首 


更 
页 
线 帮 助 


、 


有 效 地 吸引 客户 的 注意 。 
脚 部 分 的 效果 如 图 23-9 所 示 ， 它 由 一 个 大 的 DIV 其 套 版 权 


x :关于 公司 、 在 


销售 合作 和 招聘 信息 五 个 小 DIV 组 成 。 


图 23-9 页 脚 部 分 DIV 的 效果 图 


这 部 分 关键 的 实现 代码 如 下 所 示 。 


<div id="full_bottom"> 


<div id="footer" class="container "> 
<div id="footer_divider "> 
<div class=" grid_4"> 
<! 放置 版 权 信 息 --> 
<div class="credits"> 
<hl><ahref="#" class="ef "> 甜品 工房 </a></h1> 
<p class=" 1egal"> 甜 品 工房 糖果 <br /> 
&copy ; 2009 甜品 工房 版 权 所 有 </p> 
</div> 
</div> 
<! 放置 关于 公司 的 DIV 信 息 --> 
<div class="grid_2alpha"> 
<h1> 关 于 公司 </h1> 
<ul class="footer_nav"> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
省 略 其 他 类 似 代码 


</ul> 
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19. </div> 

20. ”省 略 在 线 帮助 ， 销 售 合作 和 招聘 信息 部 分 的 DIV 
2 </div> 

22. “</div> 

23. <!--/container--> 

24. </div> 


这 里 请 注意 ， 在 第 1 行 里 ， 我 们 引入 了 ID 为 fillL_bottom 的 CSS， 以 此 设置 了 页 脚 部 分 的 背 
景 图 为 黑色 ， 这 个 CSS 部 分 的 关键 代码 如 下 所 示 。 


1. #full_bottom{ 

width: 100%; float: left.; margin: 0; 

SS background: #000 url(../images/footer .jpg) repeat-x; } 

在 CSS 的 第 3 行 指定 了 背景 色 ， 而 footerjpg 就 是 一 张 黑 色 的 图 片 ， 这 里 指定 了 背景 图 的 排 
列 方式 是 repeat-x， 表 示 背 景 图 片 将 在 水 平方 向 重复 ， 此 时 页 脚 有 多 大 ， 黑 色 背 景 图 片 就 能 铺 
多 大 。 


下 首页 CSS 效 果 分 析 
这 里 ， 我 们 将 用 表格 的 形式 ， 整 理 出 首页 中 DIV 和 CSS 样 式 的 对 应 关系 ， 如 表 23-2 所 


不 。 
表 23-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
DIV 代码 CSS 描 述 和 关键 代码 


di = "| 12"> 
ee 定义 外 边 距 、 浮 动 方式 和 内 联 方式 


‘grid_12 { display:inline;float:left;margin- 
left:10px;margin-right:10px } 


<ul class="top_nav"> 


<li class="link_twitter"><a 


定义 鼠标 移 到 上 面 去 的 悬浮 效果 。 RD AIM ARM 

href="jie.html"> 关 于 糖果 的 Hp li a:hover BT 

小 知识 <fa></li> images/top_nav_small.gi center no-repeat; } 资质 认证 

<div class="clear"></div> 清除 浮动 效果 ， 当 属性 设置 float (浮动 》 
时 ， 其 所 在 的 物理 位 置 已 经 脱离 文档 流 
了 ， 但 是 大 多 时 候 我 们 希望 文档 流 能 识别 
float (浮动 )， 或 者 是 希望 float 后 面 的 元 系 
不 被 Hoat， 就 需要 用 ”clear:both; ”来 清除 
.clear {display: block; clear: both; } 

<div class="grid_2 alpha"> ”| 这 里 的 alpha 样 式 由 于 引入 了 !important， 特 


<h1> 关 于 公司 </h1> 别 指明 只 有 IE7 和 Firefox 浏 览 器 能 识别 ， 元 
IE6 不 能 识别 


.alpha{ margin-left:0 limportant; } 
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23.3 ”视频 展示 页 面 效果 分 析 


视频 展示 页 面 的 主要 内 容 是 公司 视频 ， 如 何 定位 视频 窗 体 是 这 个 页 面 布局 比较 重要 的 
问题 。 这 个 页 面 中 ， 我 们 尽 可 能 地 扩张 了 每 个 视频 窗 体 的 宽度 ， 并 等 比例 地 设置 了 高 度 ， 同 
时 ， 使 用 该 视频 中 相对 精美 的 画面 作为 视频 窗 体 的 默认 显示 画面 ， 这 样 就 能 突出 主题 ， 达 到 


使 用 视频 宣传 的 目的 。 


这 个 页 面 的 页 头 、 页 脚 以 及 “免费 试 吃 ”的 广告 部 分 与 首页 是 一 样 的 ， 这 里 我 们 将 详细 


分 析 页 面 中 的 导航 部 分 和 视频 窗 体 的 实现 方式 。 
《CE 导航 部 分 的 DIV 


如 果 在 一 个 页 面 上 ， 把 所 有 的 视频 都 堆放 到 一 起 ， 不 仅 不 
美观 ， 而 且 页 面 会 很 拉 得 很 长 。 我 们 在 本 页 面 的 主体 部 分 里 ， 
提供 了 视频 导航 菜单 ， 以 方便 用 户 的 访问 ， 这 部 分 的 效果 如 图 
23-10 所 示 。 

这 部 分 的 关键 实现 代码 如 下 。 


1. <div id="body" class="container"> 

<div id="sub_col" class="grid_3"> 

二 <div id="sub_nav_tile"> 

4 <div id="sub_nav_top "> 

全 <div id="sub_nav_bottom"> 

6 <ul class="sectionMenu sub_nav"> 

人 <liclass="twentysix"><a 
class="twentysix" href="#"> 

8. 公司 历史 </a></1i> 

9. 省 略 其 他 的 导航 信息 

10 . </ul> 

i </div> 

LZ </div> 

Ls </div> 

14. </div> 

15. </div> 


公司 历史 


船 我 们 的 创立 


关于 糖果 


”学 习 资 料 


常见 问题 


环境 与 社会 责 


新 闻 中 心 


图 23-10 导航 部 分 效果 图 


上 面 代码 中 多 个 导航 信息 的 样式 都 是 相同 的 ， 所 以 我 们 只 分 析 第 一 个 导航 信息 的 代码 。 
请 注意 我 们 使 用 第 6 行 的 ul 和 第 7 行 的 li 来 控制 段落 ， 而 在 第 7 行 里 ， 我 们 分 别 在 1i 和 a 标 签 中 ， 
两 次 用 到 了 了 DD 为 twentysix 的 CSS， 这 样 会 不 会 混淆 呢 ?” 看 一 下 下 面 这 个 CSS 的 代码 。 


WW .Sub_nav lia.twentysix 

2 

发 局 background: url(../images/26.gif) 15px8pxno-repeat ; 

4 

.Sub_nav lia.twentysix:hover, .sub_nav li.selectedPage a.twentysix 
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Go 
并 background: url(../images/26_on.gif) 15px 8px no-repeat; 
Se 


其 中 第 1 行 里 定义 的 是 针对 a 标签 的 twentysix 样 式 ， 而 在 第 5 行 定义 的 是 针对 i 的 样式 。 这 
里 两 段 CSS 代 码 做 的 是 同一 个 事情 : 指定 i (或 者 a) 标签 的 背景 图 片 。 


导航 部 分 下 方 广告 位 的 DIV 


在 导航 菜单 下 面 ， 有 很 多 空白 的 位 置 ， 这 里 可 以 放置 一 些 广告 ,效果 如 图 23-11 所 示 : 


我 们 以 傅 纤 、 悍 天 恒生 守信 


这 个 位 置 可 以 
放置 广告 位 

在 下 面 空白 的 | 想 们 天 关 们 位 只 工 各 大 并 示 全 | 
地 方 ， 也 能 放 上 昨 | 三 - 
置 广告 位 


图 23-11 导航 菜单 下 方 的 广告 位 
广告 位 部 分 的 代码 相对 简单 ， 如 下 所 示 。 


1. <divclass="textElement"> 

2 <div class="mb20"> 

3. <ahref="#"><img src=" images/rewards.jpg" alt="Forum" /></a> 
4 </div> 

Se “<div 


在 上 面 代码 的 第 2 行 里 ， 我 们 引入 了 class 为 mb20 的 CSS， 以 实现 定义 外 边 距 的 效果 ， 这 
个 CSS 的 代码 如 下 所 示 ， 它 通过 margin-bottom 定 义 底 端 的 外 边 距 为 20 像 素 。 


1 .mb20 {margin-bottom: 20px; } 


这 样 做 的 目的 是 ， 如 果 在 下 方 还 要 继续 放置 广告 图 片 ， 那 么 下 方 广告 图 片 的 顶端 将 距离 
本 张 图 片 下 方 20 个 像素 ， 如 图 23-12 所 示 。 


图 23-12 margin-bottom 效 果 展 示 图 
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视频 展示 部 分 的 DIV 


党 


视频 展示 页 面 的 整个 右 半 部 分 用 来 显示 视频 窗 体 ， 使 用 了 标题 、 视 频 和 文字 介绍 的 方 
式 ， 该 区 域 排版 使 用 相对 简单 的 实现 方式 ， 能 给 访问 者 一 个 不 错 的 感受 。 如 图 23-13 所 示 ， 它 
是 一 个 视频 的 效果 图 ， 而 页 面 其 他 视频 窗 体 与 这 个 视频 效果 是 完全 一 样 的 。 


一 个 视频 包括 : 
标题 ， 视 频 窗 体 


残 们 公司 生产 口味 持久 、 品 质 可 非 而 稳定 的 口 香 术 和 光 泡 粮 产 品 。 生 产 过 程 包括 : 在 洁净 的 空调 厂房 中 生产 口香糖 ; 全 球 
15 家 工厂 在 接收 任何 原料 之 前 都 进行 严格 取样 检验 ， 等 等 。 原 笠 通过 品质 检验 合格 之 后 ， 第 一 道 工序 就 开始 了 。 


图 23-13 列表 的 高 亮 显示 效果 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <divclass="list"> 

<! 标题 --> 

3. <h1> 口 香 糖 的 生产 </h1> 
4 <! 视频 窗口 - -> 

5 


<div class="tu"><img src=" images/gallery_item 5.jpg" border="0" /></ 


6. <! 视频 介绍 - -> 
A <P> 省 略 视频 介绍 文字 </P> 
8. </div> 


请 注意 第 5 行 的 代码 ， 它 引入 了 class 为 tu 的 CSS， 用 以 实现 视频 窗口 居中 的 效果 ，CSS 的 
代码 如 下 所 示 。 


1. #main_col .tu{ 


2 text-align:center; // 定 义 居中 样式 
3. 
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G: 
休闲 娱乐 的 小 说 阅读 
第 24 重 | 网 站 


小 说 阅读 网 站 包含 了 各 种 题材 的 网 络 小 说 ， 网 民 们 能 通过 阅读 ， 缓 解 生 
活 中 的 压力 ， 也 能 通过 访问 这 类 网 站 消遣 时 光 ， 所 以 这 类 网 站 当前 也 比较 走 
红 ， 能 吸引 一 定 的 网 络 流量 。 

为 了 更 好 地 吸引 流量 ， 这 类 网 站 需要 做 到 ; 第 一 要 界面 美观 、 样 式 丰 
富 ， 能 吸引 住 访问 者 ， 第 二 要 在 显 目的 位 置 放置 最 近 热门 的 小 说 ， 从 而 能 吸 
引 访问 者 深入 地 访问 内 页 ， 第 三 要 突出 最 新 更 新 的 小 说 。 本 章 我 们 就 来 分 析 
一 下 这 类 网 站 的 实现 方式 。 


24.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 小 说 阅读 网 站 的 首页 和 ”小 说 介绍 页 的 设计 样式 ， 而 ”小 说 搜 
索 排行 ”页 面 风 格 和 前 两 个 页 面 非常 相似 ， 所 以 就 不 再 说 明了 。 


《ZI 首页 效果 分 析 


小 说 阅读 网 站 的 首页 内 容 非常 丰富 ， 我 们 采用 了 六 行 的 样式 ， 其 中 ， 第 一 行 里 放置 ” 注 
册 登 录 方面 的 导航 条 。 第 二 行 里 ， 放 置 Logo 图 片 和 广告 性 的 图 片 ， 这 个 广告 性 图 片 不 仅 可 
以 是 商业 广告 ， 也 可 以 是 最 新 热门 的 小 说 图 片 ， 反 正 这 里 可 以 放 一 切 能 吸引 访问 者 的 内 容 。 
在 第 三 行 里 ， 放 置 导 航 菜单 和 ”最 热 小 说 排行 榜 ”的 链接 ， 这 样 做 的 目的 把 当前 最 流行 的 小 
说 最 显 目 地 展示 在 访客 面前 。 在 第 四 行 里 ， 放 置 小 说 网 站 的 主体 内 容 推荐 小 说 模块 和 小 
说 分 类 模块 。 在 第 五 行 里 ， 放 置 公告 和 常见 问题 解答 模块 。 而 在 最 后 一 行 里 ， 放 置 页 脚 的 导 
航 以 及 版 权 声明 的 内 容 。 

整个 网 站 使 用 了 图 文 并 茂 的 方式 突出 热门 小 说 ， 而 风格 上 ， 主 要 使 些 山水 图 片 ， 能 
让 人 感觉 很 休闲 。 
于 首页 的 篇 幅 很 长 ， 我 们 通过 两 个 图 来 展示 整体 样式 ， 
样式 ， 而 图 24-2 展 示 了 后 2 行 的 效果 。 


24-1 展 示 了 上 半 部 分 前 4 行 的 


鸣 


第 24 章 ”休闲 娱乐 的 小 说 阅读 网 站 


欢迎 你 登录 | 我 的 网 过 


本 站 强力 推荐 小 说 ! 


终极 神 乓 
希 一 把 无 歌 神 兵 守 越 到 异 界 
以 问世 神功 招 撕 天 下 美女 


重生 射 隆之 郭靖 
他 和 癌 在 全 调 的 记 界 里 记 还 美人 神功 和 权 
7 通力 


极 道 金 丹 


极品 坏 重 仙 苯 

卫生 这 是 一 个 芒 省 的 世界 ， 且 看 我 们 的 无 敌 痢 
汉人 间 。 要 ?当红 多 多 
共 善 。 


类 别 : 历史 武侠 ,军事 ,时 感 
天 浪 破 军 

[TT] 

已 有 27 人 评价 

芝 3 历史 插 事 查 纪 全 


B6o5 

已 有 7 人 评价 

类 别 : 历史 起, 帝王 , 军事 
热门 新 书 

证 血 册 途 

黑道 群 关 好 

幻 本 法 则 


VIP 新 节 
起 组 小 村 长 


场 风云 


一 个 千 万 门 得 主 ， 却 成 了 正道 传人 ， 却 看 这 个 身 具 正道 和 对 省 乔 生 之 娱乐 大 让 
网游 之 儿 刘 江 渤 


Fe 
死亡 十 纵 宽 异 界 人 


次 神 传说 


VIP 精品 推荐 


CE WE) FE ER 


EE 号 EEE BI 
[ee] 


四 


网 


24-1 首页 前 4 行 的 效果 
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@、 |DIV+CSS 网 站 布局 案例 精 以 (第 2 版 ) 


最 新 公告 常见 问题 解答 
欧 此 1 本 小 菩 同 提供 : 玄幻 小说 言 别人 小 说 如 时 还 有 不 明白 的 问题 。 可 以 说 系 我 们 
第 5 行 ， 放 置 最 新 公告 加 全 效 到 积 分 ?了 a 
- 【和 常见 问题 解答 bt ' 
汪 分 ，1 天 最 多 有 | a 


-5 有 书架 可 收藏 喜欢 的 小 说 ， 
在 看 书 过程 中 遇 到 问题 还 可 向 管 


理 员 寻求 帮助 。 同 时 强烈 推荐 你 注册 成 为 本 站 职 s 分 途径 +: 发 表 文章 积分 ， 每 文章 一 本 得 50 分 


VIP 会 员 ， 可 阅读 本 站 高 质量 VIP 小 说 、 享 受 VIP 四 积分 用 来 全 什么 ? 
会 员 各 项 至 尊 特 权 .- 作用 1 : 增加 会 员 等 级 ， 获 得 更 多 会 员 
机 A 。 本 站 根据 会 员 积 分 的 多 少 , 共 


开放 一 路 走 来 的 李 天 化 ,本 以 为 跳出 农 门 从 
Pedr 衣食 无 丰 投入 社会 的 滚滚 洪流 之 中 ， 
人 i 士 林 多 渊源 ， 从 此 官 路 


白 作 发 表 《 仙 途 纵横 》 
一 个 偏 名 山村 里 的 青年 ， 过 上 了 一 个 猥琐 老头 ， 得 到 了 


加 出 | 第 6 行 ， 放置 页 底 内 容 
| 手机 版 专用 
浏览 器 下 载 


图 24-2 首页 后 两 行 的 效果 图 


《ZE 小 说 介绍 页 面 的 效果 分 析 


在 小 说 介绍 页 面 中 ， 放 置 与 某 本 小 说 有 关 的 内 容 ， 比 如 小 说 介绍 、 作 者 公告 和 小 说 评论 
等 内 容 ， 通 过 这 个 页 面 ， 阅 读者 能 看 到 这 个 小 说 的 所 有 信息 ， 从 而 决定 是 否 需要 阅读 。 

这 个 页 面 采用 了 三 行 样式 ， 其 中 ， 第 一 行 和 第 三 行 的 样式 和 首页 是 完全 一 致 的 ， 都 包含 
页 头 和 页 脚 。 而 在 第 二 行 里 ， 用 大 量 的 篇 幅 ， 整 合 多 个 描述 小 说 的 模块 ， 下 面 给 出 第 二 行 的 
效果 图 ， 如 图 24-3 所 示 。 


304 


一片 

[签约 作家 ] 

兵 必 一 片 ， 黑 龙 江 省 人 。 一 个 出 了 校门 进 营 门 
的 军人 ， 一 个 要 好 文学 、 热 爱 生活 、 喜 欢 幻 起 
的 人 ， 挫 用 文字 编织 自己 的 葛 ， 写 自己 的 成 人 
童话 。 

作者 公告 


本 人 承诺 ; 1 天 2 更 , 时间 是 上 午 12 点 和 哆 9 
点 。 新 者 读者 请 注意 了 ，Q 币 卡 短 时 间 内 难以 
恢复 ， 请 读者 们 用 其 它 方式 充值 y〈 上 架 感言 
里 有 具体 的 方法 ) 

其 他 书 入 


二 了 九 届 儿 村 写 的 银 不 错 ， 故 事情 节 
禄 吸引 人 。 是 骗 很 棒 的 文章 .希望 
作者 继续 努力 ， 加 油 ? 为 我 们 奉 
棒 更 由 网 络 文学 


小 梅子 Lina 
性 这 人 么 长 时 间 了 ， 兵 心 一 直 在 努力 
把 文 写 的 更 加 的 精彩 # 不 足 的 地 


方 还 请 亲 们 多 多 的 评论 感谢 大 
家 送 兵 心 红包 9 


人 在 罗 

最 近 ， 有 些 看 言说 南海 仁 在 接受 
了 妖 界 传承 ， 并 在 拥有 无 涩 的 法 
宝 后 ,为 什么 没有 功力 大 升 了 


区 做 江湖 

看 那么 多 修真 ， 真 TM 的 没有 比 你 
和 写 得 精彩 ， 太 变 了 ， 就 是 更 新 太 

慢 ， 能 2，、3 天 看 完 最 舒服 ?人 


号 区 

看 到 第 350 意 左右 了 ,作品 扣 模 
四 宏大 ,气势 不 几 f 主人 公 三 事 四 

要 ,让 人 妆 素 4 且 法 力 高 评 能 在 
人 间 、 仙 界 呼 风 风 而? 


ns 
九 界 一 路 走 到 钢 在 ， 一 直 都 有 妹 
有 杆 兄 弟 的 陪伴 ?但 兵 心 却 没有 及 
时 满足 这 些 兄弟 的 要 求 ， 


《ZE 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 images、css 和 和 js 三 个 


是 是 是 是 是 是 是 第 24 章 “休闲 娱乐 的 小 说 阅读 网 站 


九 腊 独 世 
发 表 日 期 :2010 年 3 月 25 


GOOOO we 5% 


标签: 修真 雪人 情 接 情 兄 半 神 魔 九 界 称 要 
友情 链接 : 《新 天 介 》 《九天 户 曹 》 《再 雹 天 下 》 
书籍 简介 : 

【过 束 诸 仙 阔 】 南 海 仁 ， 一 个 生 在 清泉 镇 穷 书生 家 的 子弟 ， 一 个 偶 类 的 际遇 ， 得 到 了 修炼 
的 法 门 ， 从 此 了 开始 了 修炼 ， 走 上 追求 天 道 的 路 …… 从 此 奇 缘 、 奇 遇 、 奇 人 、 奇 事 不 断 ; 
站 遇 、 [查看 ] 


《 油 移 之 病 《 九 用 纯 防 》 


最 新 更 新 [ 新 ] 

; 【RN 书评 】 简 评 本 作 2010-01-12 19:57:39 [最 近 更 新 ] 

如 同 每 个 人 心中 都 有 一 个 江湖 一 般 ， 在 每 个 人 的 潜意识 里 ， 同 样 存在 着 一 个 虚 纠 的 世界 ， 勤 者 说 虚拟 的 空间 ， 就 在 这 
个 世界 ， 寄 托 看 个 人 的 梦想 与 奸 悉 ， 在 正 与 夏 进 与 退 的 对 立 统一 中 ， 凸 显 一 个 人 内 在 的 意识 形态 ， 和 对 所 既 历 的 人 情 ， 
| 世 而 的 思考 与 感悟。 小 说 《 九 界 独得》 就 是 这 样 的 作品 ， 作 者 的 思想 轨迹 ， 或 者 说 意念 ， 都 借助 纷呈 蚁 猎 的 笔 显 文 | 
字 ， 淋 演 尽 致 地 展现 出 来 。 在 作者 的 笔下 ， 一 个 穷 秀 才 家 的 后 人 ， 因 偶然 机 遇 ， 得 到 修真 的 法 门 ， 从 此 开始 修炼 ， 追 
求 天 道 ， 也 因此 奇 缘 奇 遇 奇 人 奇 事 不 断 ， 糖 遇 和 情 真情 奇 情 相连 ， 生 死 伙 关 .…[ 查 看 ] 


第 一 卷 车 云 学 艺 着 介绍 -入 能 丰 门 ,站 自己 身 - 
1. 【RN 书评 】 简 评 本 作 : 

3 想 革 

5. 第 二 章 神秘 古书 
7. 第 四 齐 字 划 变故 

9. 第 六 章 记名 弟子 

1 第 作 章 当主 搞 基 
| 19 和 二 本 师姐 家 种 

15 第 士 二 章 葵 去 轨 艺 (1) 

17 第 十 四 章 苍 二 较 世 (3) 


16 第 十 三 全 天 二 软 苑 (2) 
18 ,第 十 五 刘 技 售 同门 


第 二 卷 入 世 传 信 卷 介绍 - 重 入 世 众 意 流 云 ， 降 瞻 除 魔 修道 旋 - 
| 19 第 十 六 章 孙 进 夺冠 作 
| 21 第 上 人 章 巧 相遇 入 


涌 信 二 


《 九 阳 纯 脉 》 第 a 第 人 终 


《 九 阳 绝 脉 》 第 
一 部 二 部 


图 24-3 小 说 介绍 页 面 的 效果 图 


目录 分 别 保存 网 站 所 用 到 的 


片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 24-1 所 示 。 
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表 24-1 小 说 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文 件 index.htm 首页 
[story.html 小 说 介绍 页 面 
| search1.html 小 说 搜索 排行 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 [之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


24.2 ”规划 首页 的 布局 


因为 需要 体现 出 本 网 站 的 特色 ， 所 以 小 说 网 站 的 首页 需要 设计 得 复杂 一 点 ， 本 节 我 们 就 


来 依次 分 析 其 中 重要 部 分 的 实现 方式 。 


搭建 ”注册 和 登录 “导航 条 的 DIV 


在 首页 的 最 上 方 ， 放 置 ”注册 和 登录 的 导航 条 ， 这 样 放 的 目的 是 为 了 方便 用 户 登 录 后 
阅读 ， 这 部 分 的 效果 如 图 24-4 所 示 。 


图 24-4 注册 和 登录 导航 条 设计 分 析 图 


这 个 导航 条 的 关键 实现 代码 如 下 所 示 。 


1. <div id="main-navigation"> 

2 <div class="navigation"> 

3 <! 靠 左 部 分 - -> 

4. <p id="network_sites"><ahref="#" class="active"> 

5. 首页 </a> | <a href="#" target="_blank"> 注 册 </a> 

6 </p> 

和 <! 靠 右 部 分 --> 

2 <div class="usernav'"> 

9 . <P> 欢 迎 您 <a href= "#"> 登 录 </a> | <a href="#"> 我 的 阅读 </a></p> 

10. </div> 

Tl < /ei 

其 中 ， 第 4 行 和 第 9 行 里 ， 分 别 定 义 了 靠 左 和 靠 右 部 分 的 文字 内 容 ， 这 里 靠 左 还 是 靠 右 的 
效果 使 用 CSS 样 式 来 实现 的 ， 比 如 在 第 4 行 里， 引入 了 netword_sites 的 CSS， 这 部 分 的 关键 代 


il 第 24 章 休闲 娱 乐 的 小 说 阅读 网 站 


码 如 下 所 示 ， 它 通过 第 2 行 的 代码 实现 靠 左 的 效果 ， 同 样 在 第 8 行 的 usernav 里 ， 通 过 float:right 
来 定义 靠 右 悬 浮 的 效果 。 


1 
区 
避 
4. 
§ 
6 
六 


#network_sites{ 
float : left; // 定 义 靠 左 的 悬浮 方式 
padding:0 5px; // 定 义 内 边 距 
// 设 置 列 表 项 目标 记 放 置 在 文本 以 外 ， 环 绕 文本 不 根据 标记 对 齐 
list-style:none outside; 
text-align:center ;color :#000; // 设 置 字体 的 对 齐 方 式 和 字体 颜色 
} 


搭建 Logo 图 标 和 广告 图 片 部 分 的 DIV 
在 首页 的 第 2 行 ， 是 一 个 大 的 DIV 包含 Logo 图 标 和 广告 图 片 ， 这 部 分 的 效果 如 图 24-5 所 示 。 


图 24-5 Logo 和 广告 图 部 分 的 DIV 效果 图 


这 部 分 的 关键 代码 如 下 所 示 ， 由 于 比较 简单 ， 这 里 就 不 做 分 析 了 。 


1. <div id="header "> 

2 <div id="header-inner"> 

人 六 <hl><ahref="#"> 

4 <1---Logo 图 片 -> 

5 <img src=" img/1ogo_print3.gif" width="187" height="80" border="0" /></ 
a> 

6 </hl> 

‘ee <div id="ADEXPERT_BANNER" class="header_ad"> 

8 <!--- 广 告 图 -> 

9 . <img src=" img/001-728-90.jpg" border="0" /> 

10. </div> 

11. </div> 

12. </div> 


攻 尺 其 疾 搭建 导航 菜单 的 DIV 
小 说 阅读 网 站 往往 不 只 有 小 说 ， 还 有 社区 等 供 访问 者 交流 的 模块 ， 为 了 方便 访问 者 找到 


入 口 ， 这 里 我 们 把 导航 菜单 放 在 首页 主体 部 分 的 上 方 ， 效 果 如 图 24-6 所 示 。 


网 


四 


24-6 导航 菜单 的 DIV 效果 
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QlDvicss mrssnas 25) 和 和 旺 


代码 如 下 所 示 ， 这 部 分 的 代码 也 比较 简单 ， 所 以 也 不 做 详细 分 析 。 


1. <div id="nav "> 

> 

E 吉 <1i><a href="index.html" > 首页 </a></1i> 

4 <1i><a href="story.html" rel="nofollow"> 小 说 </a></1i> 

5. <li id="blogd"><ahref="searchl .html"> 社 区 </a></1i> 

Be </ul> 

7. ”<div id="subnav"><a href="#" rel="nofol1ow"> 最 热 小 说 排行 榜 </a></div> 
8. </div> 


搭建 ”最 新 推荐 榜 。 部 分 的 DIV 


在 最 新 推荐 榜 部 分 的 DIV 里 ， 将 放置 网 站 推荐 的 小 说 ， 
这 部 分 的 样式 如 图 24-7 所 示 。 

下 面 给 出 这 个 DIV 的 关键 实现 代码 ， 其 中 ， 从 第 5~17 
行 ， 定 义 了 一 本 推荐 小 说 的 样式 ， 其 他 小 说 定义 部 分 与 这 很 
相似 ， 所 以 不 再 重复 给 出 。 


1. <divclass="mm-cg-top"> 

2 <h3 class="mm-sub"><span> 最 新 </span> <br/> 

3 <strong> 推 荐 榜 </strong> </h3> 

4 <ul> 

5. <1liclass="mm-first"> <strong><ahref="#"> 大 明 毒 泉 </a></strong> 
6 <div class="biz_rating clearfix"> 

7 <div class="rating-small"> 

8 . <img class="stars_4" src= "img/stars/stars_4.png" width="83" /> 
人 </div> 

io <p> 已 有 8 人 评价 </p> 

Lie </div> 

2 <span> 类 别 : 

Ts <a rel="nofollow”href="#"> 历 史 </a>， 

14. <a rel="nofollow”href="#"> 武 侠 </a>， 

Le <a rel="nofollow” href="#"> 奇 幻 </a> ， 

16 . <a rel="nofollow"” href="#"> 情 感 </a></span> 

Ws = 

18. 省 略 其 他 推荐 小 说 

19. 
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20、 
2 


</ul> 
</div> 


搭建 ”本 站 强力 推荐 小 说 部 分 的 DIV 


在 本 站 强力 推荐 小 说 部 分 中 ， 将 使 用 图 片 小 说 题目 和 小 说 介绍 的 方式 给 出 推荐 


为 了 吸引 


上 方 ， 这 部 分 的 效果 如 图 24-8 所 示 。 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


AONAAOD- 


8. 


的 小 说 ， 


| 访问 者 的 注意 ， 这 个 DIV 放 在 网 页 的 右 


界 ， Ma 


A 美女 ? 当然 是 多 : 


图 24-8 本 站 强力 推荐 小 说 部 分 的 DIV 效果 图 


<div class="mm-cgs-box mm-cg-offers"> 
<! 标题 文字 - -> 
<h3 class="mm-sub"><span> 本 站 强力 推荐 小 说 !|</span></h3> 
<ul class="mm-rlist"> 
<1i> 
<h4><a href='#'> 
<! 小 说 的 图 片 --> 
<img src=" img/media/id4fgmew5wwOf tw2abys-46x46.jpg" width="46" 


height="46" class="photo-small" /> 


19， 


在 上 面 


</a> 
<! 小 说 的 题目 - -> 
<ahref= "#"> 终 极 神 兵 </a></h4> 
<! 这 里 放置 小 说 的 介绍 - -> 
<p> 带 一 把 无 敌 神 兵 穿越 到 异 界 <br/> 
<span> 以 绝世 神功 招揽 天 下 美女 </span> 
</p> 

</1i> 

省 略 针对 其 他 小 说 的 编码 

</ul> 
</div> 


代码 的 第 1 行 中 ， 定 义 了 通 篇 DIV 所 用 到 的 CSS 样 式 mm-cgs-box 和 mm-cg-offers， 


下 面 是 这 两 个 CSS 的 代码 ， 其 中 主要 通过 了 第 3 行 的 代码 定义 了 悬浮 方式 ， 通 过 第 8 行 的 代码 


定义 了 底 边 距 和 底部 线 的 样式 。 


这 里 两 个 CSS 都 定义 了 margin-bottom 的 样式 ， 真 正 生 效 的 以 第 二 次 定义 ， 也 就 是 第 8 行 的 
代码 为 准 。 

1. .mm-cg-side .mm-cgs-box{ 

A clear :both; 

3 float : left; // 定 义 悬 浮 方 式 
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4. margin-bottom:10px; // 设 置 底部 外 边 距 

i width:300px; // 设 置 宽度 

6 

7. .mm-cg-offers{ 

8. border-bottom: 1px dotted #ccc; // 设 置 底部 边 距 和 底 边 距 线 的 样式 
ee Padding-bottom: 10px; // 定 义 底部 的 内 边 距 

10 0 


搭建 ”小 说 导航 ”部 分 的 DIV 


在 首页 中 ， 为 了 方便 读者 阅读 ， 需 要 放置 一 个 小 说 导航 模块 ， 这 个 模块 包括 “玄幻 小 
说 、 科幻 小 说 和 修真 小 说 ”等 分 类 ， 每 个 分 类 下 放置 一 些 热门 小 说 。 

这 部 分 的 效果 如 图 24-9 所 示 ， 在 图 的 下 方 ， 放 置 了 编辑 强 推 和 VIP 精品 推荐 模 
块 ， 这 部 分 的 样式 比较 简单 ， 所 以 就 不 再 说 明了 。 


小 说 类 型 ..… 


玄幻 小 说 


编辑 强 推 的 小 说 


图 24-9 小 说 导航 部 分 DIV 的 效果 


国 


1. <divclass="clearfixmm-cg-bestfor"> 

2. ”<h3> 小 说 类 型 &hel1lip;</h3> 

3 <div class="mm-vtab"> 

4. <ul class="mm-vtab-list"> 

5. <! 这 里 放置 小 说 的 分 类 - -> 

Bs <li class="mm-active"><a href="#mm-cg-bf-1"> 玄 幻 小 说 </a></1i> 
Te 省 略 其 他 分 类 

RS </ul> 

局 <div id="mm-cg-bf-1" class="mm-active mm-vtab-tab"> 
10 . <ol> 

i <! 放置 玄幻 小 说 分 类 下 的 小 说 - -> 

Le <1i><a href="#"> 不 灭 天 妖 </a> 

区 沪 <span class="mm-suburb"> 作 者 :极乐 </span></li> 

le 省 略 玄幻 分 类 下 的 其 他 小 说 

1 </ol> 
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TBE </div> 

i 省 略 其 他 小 说 
18 . </div> 

19. </div> 


上 面 代 码 中 ， 在 第 6 行 里 ， 放 置 了 分 类 的 样式 ， 而 在 第 12 行 里 ， 放 置 了 某 个 分 类 下 的 热 
门 推荐 小 说 。 


搭建 ”最 新 公告 “部 分 的 DIV 


最 新 公告 部 分 使 用 多 种 格式 的 文字 来 向 访问 者 展示 
网 站 的 公告 ， 效 果 如 图 24-10 所 示 。 

这 部 分 的 关键 代码 如 下 所 示 ， 在 第 2 行 ， 通 过 mm-sub 
这 个 CSS， 定 义 了 最 新 公告 ”文字 的 样式 ， 第 3 行 定义 
了 蓝 底 色 的 公告 文字 ， 在 第 5、 第 6 行 定 义 了 带 图 片 的 公 
告 内 容 ， 而 第 10~12 行 定义 了 下 方 带 标题 的 公告 。 

1. <divclass="mm-section"> 

2. <h3 class="mm-sub"><strong> 最 新 公告 </ 


strong> <br/> 


3 <span> [公告] 本 小 说 网 提供 : 玄幻 小 说 ,言情 小 说 


RA rr) 


共 省 | 本 小 滋 网 提供 : pai 


修真 小 we 
OD: 包含 图 片 效果 

在 和 各 四 问题 可 内 管 
理 员 寻 求 帮助 。 同 时 强烈 推荐 您 注册 成 为 本 站 
VIP 会 员 ， 可 阅读 本 站 高 质量 VIP 小 说 、 享 受 VIP 


会 员 各 项 至 尊 特 权 .…- 带 标题 的 公告 
新 作 发 表 《 管 路 》 
伴随 着 改革 开放 一 路 走 攻 :本 以 为 跳出 农 门 从 


此 端 上 铁 饭 硕 。 去 食 无 执 入 社会 的 洪流 之 中 
ns: 士 林 多 济源 ,从 此 官 路 


新 作 发 表 《 仙 途 纵横 》 

一 个 偏 解 山村 里 的 甫 年， 过 上 了 一 个 总 瑞 老 头 ， 宰 到 了 
一 个 订 异 的 式 指 ,修炼 之 门 因此 为 地 打开 。 看 江 云 枫 
加 何在 实力 至 上 的 世界 ,为 守护 女人 、 兄 弟 ， 抓 起 腥 风 
血 甫 ， 创 造 出 一 个 又 一 个 的 奇迹 ， 成 承 传 奇 。 


,网 游 小 说 </span> </h3> 
4. <h4><ahref="#"> 图 24-10 最 新 公告 部 分 的 DIV 
1 -3 Ye 


le A jpg” 
width="55px" alt="" /></a> 

6. 省 略 包 含 图 片 的 公告 文字 

7. <a href="#">&hellip;</a> 

=/ps 

9. </h4> 

10. <h4><a href="#"> 新 作 发 表 《 管 路 )》 </a></h4> 

‘ule 省 略 公告 的 内 容 文字 

2 ap 

13. </div> 


我 们 来 看 一 下 上 面 代码 第 2 行 中 名 为 mm-sub 的 CSS 样 式 ， 它 定义 了 颜色 ， 关 键 代码 如 下 
所 示 。 在 这 个 DIV 中 ， 出 现 了 多 种 的 字体 颜色 ， 都 是 通过 类 似 的 CSS 实 现 的 。 


1. .mm-sectionh3.mm-sub span { 
入 二 color :#539DE6 ; 
< 


搭建 页 脚 部 分 的 DIV 


页 脚 除了 包括 传统 的 版 权 信 息 和 导航 菜单 外 ， 还 包括 一 个 手机 版 专用 浏览 器 下 载 的 
图 片 ， 效 果 如 图 24-11 所 示 。 
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版 专用 
浏览 器 下 载 | 


图 24-11 页 底部 分 的 DIV 


这 部 分 的 关键 实现 代码 如 下 所 示 ， 代 码 比较 简单 ， 所 以 就 不 再 分 析 了 。 
1. <div id="footer"> 

2. <div id="footer-inner"> 

3 <! 导航 菜单 - -> 

a <p><a href="#" rel="nofollow"> 首 页 </a> | 

<ahref="#" rel="nofol1ow"> 关 于 我 们 </a> | 

G6: 省 略 其 他 导航 菜单 

1 </a></p> 

8. <! 版 权 声明 - -> 

9. <div id="copyright"> 看书 网 &copy; 2006-2010 版 权 所 有 ,保留 一 切 权利 </div> 
10. </div> 

11. </div> 


12. <! 定义 图 片 --> 


13. <div id="iphone-badge" style="text-align:center ;margin: 10px 0 20px 0;"> 
14. <ahref="#" rel="nofollow" target="_blank"> 


15. <img src=" img/iphone_badge .gif" width="153px" height="50px" /></a> 
16. </div> 


CE 首页 CSS 效 果 分 析 _ 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 
首页 中 其 他 CSS 的 效果 ， 如 表 24-2 所 示 。 


回 


表 24-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


CSS 描 述 和 关键 代码 
定义 页 头 部 分 的 样式 ”| 定义 页 头 DIV 的 宽度 、 内 边 距 和 外 边 距 


<div id= header-|#header-inner{width:980px; margin:0 定义 宽度 | 


inner > auto; padding:7px 0 Opx Opx} 
<ul class="aux-nav"> 定义 文本 框 里 的 默认 内 容 是 加 粗 的 
.aux-nav { 


导航 


上 传 杭 频 。 联系 我 们 


list-style: none; 


‘overflow: visible; 将 此 部 分 定义 为 一 个 
display: block:; et 


z-index: 300; 
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( 续 表 ) 
DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div class="mm-ss- 定义 标签 卡 中 的 数字 的 内 边 距 相同 ， 
slide"> 并 设置 字体 颜色 与 背景 色 


.mm-slideshow .mm-ss-slide { 
position:absolute; 
width:10096; 妖 师 鳞 腾 伟 
height:100%; 
} 
<div class=" mm- 设置 a 标 签 的 颜色 和 字体 


cg-featured-desc"> .mm-cg-featured-desc pa { FT 
<a href="#"> 详 细 color:#6CF; 一 色 和 字体 大 小 
&hellip;</a> font-size:11px; 


24.3 在 首页 中 实现 动态 效果 


在 首页 中 ，CSS 的 主要 功能 是 定义 静态 的 样式 ， 比 
如 宽度 、 高 度 和 字体 颜色 等 ， 首 页 中 用 CSS 实 现 动态 效 
果 的 地 方 不 多 ， 主 要 是 鼠标 悬浮 变换 的 效果 ， 效 果 如 图 
24-12 所 示 。 

先 来 看 一 下 这 部 分 的 HTML 代码 ， 请 注意 代码 的 第 
一 行 引 入 了 ID 为 nav 的 CSS 样 式 。 


图 24-12 实现 鼠标 悬浮 效果 的 样式 


1. <div id="nav"> <! 在 这 里 引入 了 nav 这 个 CSS- -> 

2 <ul> 

| <1i><a href="index.html" > 首页 </a></1i> 

4 <li><a href="story.html" rel="nofollow"> 小 说 </a></1i> 

5 <1i id="blogd"><a href="searchl.html"> 社 区 </a></1i> 

6 </ul> 

I <div id="subnav"><ahref="#" rel="nofol1ow"> 最 热 小 说 排行 榜 </a></div> 
8. </div> 


这 个 CSS 部 分 的 关键 代码 如 下 所 示 。 


#nav { 
background-color :#539DE6; // 定 义 背景 颜色 


上 


由 
2 
3 
4 
5. #navul lia:hover { 
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background-color :#BCD7F1; // 定 义 背 景 颜色 


6. 
友 
el 

当 鼠 标 放 上 去 时 ， 就 会 如 第 6 行 定义 的 ， 展 现 相 CD7F1 的 颜色 ， 当 鼠标 移 开 时 ， 就 会 如 


第 2 行 定义 的 ， 展 现 嫩 39DE6 背 景 


绍 
子 花 
就 不 


24.4 ”小 说 介绍 页 面 


在 小 说 介绍 页 面 中 ,放置 了 作家 介绍 、 内 容 介绍 、 作者 公告 、 书籍 介 
i 录 和 内容 更 新 等 内 容 。 下 面 我 们 就 来 分 析 其 中 重要 的 DIV， 页 面 上 一 些 样 
消 但 代码 比较 简单 的 DIV， 就 请 大 家 直接 阅读 与 本 书 配套 的 下 载 资源 的 相关 代码 ， 这 里 
再 分 析 了 。 


作家 介绍 部 分 的 DIV 


作家 简介 在 作家 介绍 部 分 的 DIV 中 ， 用 图 片 和 文字 介绍 的 方式 ， 
了 ” 简捷 地 介绍 这 部 小 说 的 作家 信息 ， 效 果 如 图 24-13 所 示 。 
这 部 分 的 关键 代码 如 下 所 示 ， 由 于 比较 简单 ， 所 以 不 做 
ly ee 详细 分 析 。 
[ 莹 约 作家 ] 
兵 必 一片， 黑龙 江 省 人 。 一 个 出 了 校门 进 营 门 
的 军人 ， 一 个 爱好 文学 、 热 爱 生 活 、 喜 欢 各 想 
的 人 ， 欲 用 文字 编织 自己 的 萝 ， 写 自己 的 成 人 
童话 。 
图 24-13 作家 介绍 部 分 的 DIV 
1. <div id="sidebar "> 
2 <div id="author "><h3> 作 家 简介 </h3> 
3 <! 作家 图 片 - -> 
4. <img src=" img/media/j003.jpg" border="0" /> 
5 &nbsp'; &nbsp;<a href="#"> 兵 心 一 片 </a><br /> 
6 [签约 作家 ] <br /> 
省 略 描述 性 文字 
8 </div> 
9. </div> 


小 说 目录 部 分 的 DIV 


小 说 目录 部 分 将 列 出 小 说 的 目录 ， 以 便 访问 者 阅读 ， 这 个 DIV 里 的 文字 排列 整齐 ， 效 果 


如 图 
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24-14 所 示 。 


实现 此 部 分 的 DIV 代码 如 下 所 示 ， 其 中 用 到 了 table 表 格 来 放置 目录 ， 请 注意 在 第 1 行 中 


; 1.【RN 韦 评 】 简 评 本 作 2. 人 物 介绍 
3 根子 4. 第 一 剖 抓 周 疑 云 
5, 第 二 章 神秘 古书 6. 第 三 剖 如意 宝 黎 
| 7 第 四 部 家 这 变 要 8 第 五 章 履行 诺言 
1 9. 第 六 章 记名 弟子 10 第 七 章 灵 智 初 开 
| 11. 第 作 章 艰 闻 筑 基 12. 第 九 齐 同门 孙 进 
13. 第 十 章 师姐 寒 看 14. 第 十 一 草 分 丹 增 功 
15, 第 十 二 章 苍 云 较 艺 (1) 16, 第 十 三 章 苑 云 较 九 〔2) 
| 17. 第 十 四 章 蕉 云 较 艺 [3)] 18 .第 十 五 章 技 惊 同门 


图 24-14 小 说 目录 部 分 的 DIV 展示 


直接 通过 background-color 属 性 来 设置 这 个 DIV 的 背景 色 。 


护 


<div style="padding:2px;border:dotted thin lpx #848484;background- 


Color:#EEPEBE > 


色 
3 
4 
6 . 
学 
a 
9. 
1 


bs 
L223 


<h3> 第 一 卷 苍 云 学 艺 
<span style="color :BLACK; font-size:12px"> 卷 介绍 - 入 修真 门 ， 炼 自己 身 。 
</span></h3> 
<table width="99%" border="0" cellspacing="5" cellpadding="0"> 
<tr> 
<td>3.<ahref="#"> 棉 子 </a></td> 
<td>4.<a href="#"> 第 一 章 抓 周 疑 云 </a></td> 
</tr> 
省 略 其 他 部 分 的 目录 
</table> 
</div> 


小 说 推荐 部 分 的 DIV 


在 小 说 推荐 页 面 中 ， 为 了 把 访问 者 吸引 到 同类 热门 小 说 上 ， 需 要 使 用 专门 的 DIV 放置 小 
说 推荐 的 内 容 ， 效 果 如 图 24-15 所 示 。 


喜欢 此 小说 的 还 要 欢 
ER Ta) 
推荐 小 说 的 DIV 后 


图 24-15 小 说 推荐 部 分 的 DIV 展示 


实现 此 部 分 的 DIV 代码 如 下 所 示 ， 其 中 在 第 2 行 里 ， 直 接 定 义 了 这 个 DIV 的 背景 色 、 高 度 
和 边框 属性 ， 以 第 4~7 行 ， 给 出 了 一 本 推荐 小 说 的 链接 ， 其 中 第 5 行 定义 了 图 片 ， 第 6 行 定 义 
了 图 片 下 方 的 文字 。 


! 这 
2 


<! 定义 这 个 DIV 的 背景 色 等 样式 - -> 
<div style="padding:2px;border:dotted thin lpx #848484;background- 
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color :#FFFFFF :height:180px; "> 


3. ”<h3 > 喜欢 此 小 说 的 还 喜欢 </h3> 

4 <div style="width:100px ;float :left;margin-left:20px;"> 

5 <img src=" img/media/j002. jpg" width=" 100px" height="100px" /><br /> 
6 《 九 阳 绝 脉 》 第 一 部 

We </div> 

8 省 略 其 他 推荐 的 小 说 

9. </div> 


316 


包罗 万 象 的 新 闻 一 
门户 网 站 第 25 草 


门户 网 站 是 指 提供 某 类 综合 性 互联 网 信息 资源 的 网 站 ， 由 于 互联 网 市 场 
竞争 的 日 趋 激 烈 ， 门 户 网 站 也 快速 地 向 其 他 业务 进行 拓展 ， 以 至 于 目前 门户 
网 站 的 业务 包罗 万 象 ， 已 经 成 为 网 络 信息 世界 的 “百货 商场 ”。 

本 章 我 们 要 介绍 一 个 新 闻 题 材 的 门户 网 站 ， 它 包含 诸如 科技 、 娱 乐 、 体 
育 方面 的 新 闻 ， 还 包含 了 针对 当前 热门 新 闻 ， 开 设 的 新 闻 专 题 模块 ， 供 大 家 


阅读 评论 。 
25.1 网 站 页 面 效 果 分 析 
新 闻 门 户 网 站 的 特点 是 : 第 一 ， 行 文 严肃 ， 背 景色 调 不 能 很 花哨 ， 第 二 ， 排 版 紧凑 ， 让 


户 看 到 足够 多 的 信息 ， 第 三 ， 图 文 并 茂 ， 不 能 让 用 户 在 访问 时 产生 枯燥 的 感觉 ， 第 四 ， 在 
页 面 醒目 的 位 置 ， 需 要 留 出 广告 位 ， 因 为 出 售 广告 位 也 是 门户 网 站 的 一 种 盈利 模式 。 

在 本 章 中 ， 将 着 重 分 析 首 页 和 ”新 闻 专题 导读 页面 的 设计 样式 。 而 ”新 闻 ”页面 的 特 
点 不 多 ， 所 以 不 做 详细 分 析 ， 相 关 代码 都 能 在 与 本 书 配套 的 下 载 资源 中 获取 。 


CH 首页 效果 分 析 


新 闻 门 户 网 站 需要 包含 的 内 容 非常 多 ， 我 们 把 首页 分 为 三 行 的 样式 ， 在 第 一 行 里 ， 放 置 
门户 网 站 的 页 头 ， 包 括 网 站 的 Logo 和 新 闻 位 置 。 第 二 行 是 一 个 大 的 DIV， 其 中 可 以 用 诸多 小 
DIV 来 布局 各 类 的 新 闻 。 而 第 三 行 是 页 脚 部 分 ， 包 含 版 权 声 明和 导航 信息 。 

首页 篇 幅 比较 长 ， 我 们 分 两 块 截图 来 说 明 ， 页 头 和 主体 部 分 的 效果 如 图 25-1 所 示 ， 页 脚 
部 分 的 效果 如 图 25-2 所 示 。 


QQ、|DIV+CSS 网 站 布局 案例 精 征 (第 2 版 ) 
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《十 月 围城 》 横 扫 香 港 全 你 奖 任达华 称 帝 
动态 -[ 公 路 通道 现 裂 颖 ] [公安 部 回应 "灾区 哄抢 【5 人 偷 水 被 抓 ] 
才 搓 -[ 检 员 连 续 工 作出 现 高 原 反应 ] [物资 发 放 实 行 发 票 制 ] 
卫视 今 晓 举 行 旺 灾 蜡 会 图 片 日 吉 : 八方 支援 
最 新 [特刊 之 玉树 孩子 | [打工 男子 借 铸 送 亡妻 回 家 ] [感动 瞻 间 ] 
热点 -黄金 玖 择 最 后 一 天 ] [被 埋 者 死亡 军 较 高 】 [玉树 灾 ! 


娱乐 新 闻 科 扶 专题 
社会 新 闻 技能 培训 


体育 新 闻 创业 心得 被 国 廊 孩 说 打 扩 感动 国人 刻 六 中 寻找 希望 
突 发 新 闻 娱乐 关注 呈 乎 寻常 的 载 力 ] [天 堂 的 你 们 一 路 走 好 ] [ 支 所 
实时 新 闻 八卦 娱乐 

军事 新 闻 明星 风采 

科技 娱乐 团子 

呆 T 业 内 专题 新 闻 

手机 数码 专题 新 闻 


92009 * 世博 会 明 起 检 进 沪 车 辆 
生根 行 后 动 差别 化 房贷 
汽油 底 至 6.92 元 北京 出 
= 验 价 县 跌 巴菲特 受 思 
昌河 南 局 动 事业 单位 改革 
全 欧洲 跑 空 业 所 各 员 停业 


59009 


当当 网 新 书 畅 销 排行 榜 当当 网 新 书 畅销 排行 榜 


9 里约热内卢 遭 洪水 和 视 石 流 营 击 
。 恒 河 沐 洛 庆 祝 印度 “大 变节 " 

. 国际 担保 

西非 海盗 效仿 “党 马里 ” 重 殉 括 
9 西 班 政 警方 坦 获 洛 800 公 斤 毒 品 


挫 乐 新 闻 


国 旭 斯 检 内 滞 进 胎 轩 只 出 遇 不 利于 影响 环 法 备战 
学 下 与 丈夫 女儿 终 团 到 称 知 不 是 你 们 我 时 就 贫 了 
图 重启 刚 六 身 成 功 出 席 活动 避 谈 郭晶晶 怀孕 
“人 4 日 NBAs 湖人 醋 士 各 伤 大 将 保罗 原 出 证 世 棉 守 


* 周润发 看 中 2 6 亿 豪 宅 无 敌 海景 保安 严 客 (图 ) 
* 文章 撤 爱 妻 马 伊 刑 外 出 开 宝 马 据 短 发 女 唱 咖 咽 


“ 杜琪峰 转 拍 歌舞 片 张艾嘉 执笔 《华丽 上 班 族 》 


社会 新 闻 


* 091 专 案 组 曝 文 强 案 惊 人 细节 庭审 仅 20 分 神 
* 中 科大 博士 生 求职 职 未 果 下 嫁 ” 中 学 执教 中 
“* 世博 会 明 起 检 进 沪 车 辆 欢乐 盛装 巡游 方案 揭 
油 博 中 国 国际 次 提 队 : 青海 地 震 最 新 现场 情况 
i 兰 总 统 卡 廷 行 有 内 医 与 总 理 不 和 踏 上 不 归 路 
， 男子 被 网 友 骗 至 异地 强行 做 手术 卖 峭 
* 尼日利亚 风 中 国 旧 战机 复兴 空军 总 额 数 亿 ( 图 } 
哈尔滨 遭遇 罕见 特大 降雪 长 春 大 面积 停 水 (图 ) 
统 卡 廷 行 有 内 划 与 总 理 不 和 踏 上 不 归 路 
* 哈尔滨 遭遇 罕见 特大 降雪 长 春 大 面积 停 水 (图 } 


科技 "财经 


“支付 宝 CEO 彰 闭 谈 超级 网 银 ， 我 们 都 是 “国家 队 ” 
“* 青海 电信 承诺 用 户 闪 费 不 停机 寻 亲 热线 马上 开通 
“世博 会 明 起 检 进 沪 车 辅 欢乐 盛装 巡游 方案 揭 

， 艾 瑞 ， 中 国 移动 电子 商务 用 户 规模 突破 3658 万 
“银联 推 新 一 代 手 机 支付 绕 过 运营 商 SIM 卡 

“* 玉树 巴 塘 机 坛 距 震中 仅 30 公 里 地 面 通讯 损 疝 严重 
“大 摩 分 析 师 称 诺 基 亚 和 摩托 罗拉 为 Palm 景 佳 买 家 
* 深圳 总 工会 要 求 富士 康 就 5 名 员工 坠 楼 吸取 教训 

* Google 疏 购 视觉 搜索 厂商 Plink 交易 价格 未 公布 

“惠普 收购 3CCM 创 指 H3C 与 华为 合作 多 过 竞争 


| 


传媒 商机 推荐 


汽车 资讯 

五 一 前 团购 买 车 折扣 价格 
“ 曝 2010 北 京 车 展 重 磅 新 车 
"老百姓 最 爱 买 的 十 款 车 型 
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2010 电 脑 免费 培训 
生活 用 品 2 折 想 1 多 买 争 送 ? 
生活 用 品 2 折 起 1 多 买 多 送 
99 高 营 考 4 月 6 日 起 报名 

快 去 ! 晰 书 发 表 会 

OL 候 日 在 家 的 舱 松 
生活 用 品 2 折 起 1 多 买 多 送 


人 


we 
青海 玉树 发 生 7 1 级 强 地 震 

便 山西 王家 岭 煤矿 惕 水 事故 
日 泰国 红 祖 军 集会 

龟 。 印度 安全 部 队 倡 比 击 

量 俄罗斯 地 铁 连 环 爆 炸 
波兰 总 统考 机 类 事 

日 智利 发 生 8 .8 级 地 需 


. 


关于 我 们 

问题 反馈 新 手 学 党 
关于 我 们 法 律 条 款 
合作 通道 English 
网 站 公告 政府 政策 


图 25-1 首页 上 半 部 分 的 效果 图 


ii 第 25 齐 包罗 万 象 的 新 闻 门户 网 站 


图 25-2 首页 页 脚 的 效果 图 


新 闻 专题 导读 页 面 的 效果 分 析 


在 新 闻 专题 导读 页 面 
新 闻 。 


和 首页 一 样 ， 这 个 页 面 也 是 采用 了 三 行 的 样式 ， 第 一 、 第 
脚 。 而 在 第 二 行 里 ， 以 三 行 三 列 的 方式 布局 ， 页 面 第 二 行 的 样式 如 图 25-3 所 示 ， 页 头 页 脚 与 


如 


例 客服 信箱 


建议 使 用 ES 0 以 上 浏览 器 浏览 
本 站 保留 一 切 权利 会 2008- 2010 


Ph， 主要 放置 了 若干 个 新 闻 主 题 ， 以 及 与 这 些 新 闻 主 题 相关 的 一 些 


首页 完全 相同 的 部 分 我 们 就 不 再 展示 。 


二 CCTV 抵抗 NBA 能 成 功 吗 


什么 “世界 末日 ”能 够 深入 人 心 

站 本末 就 是 个 爱 八 卦 、 相 从 “天 人 大 应 ”的 国度 汶 纺 ， 

词 可 能 很 多 人 不 热 大 ,但 如 果 说 “阴阳 五 行 ” “天 人 

:你 是 不 是 就 明白 了 ? 但 加 这 么 一 个 

该 造 “ 预 言 ”的 工夫 ， 也 成 为 了 中 国 古代 的 一 种 学 
说 ,还 六 慰 妹 补 草 春 。 有 人 说 ， 这 是 封建 统治 者 的 需要 ， 
其 实 不 完全 是 这 样 ， 老 百姓 更 需要 这 套 “理论 ”。 试想 ， 
在 一 个 经 党 没有 内 沦 自由 、 政 治 民主 、 利 学 法 制 的 计 娃 时 
代 ， 你 让 一 个 首 通 老百姓 怎么 决策 自己 的 人 生 大 事 呢 ? 更 
更 论 志 受 压 近 的 人 民 ， 连 榆 从 路 在 墙角 往 木 类 人 身上 扎 针 
的 “出 气 权 ” 都 不 能 有 吗 ? 当 陈胜 吴广 从 鱼 和 狐 焊 身上 找 
到 自己 的 “合法 性 ”的 时 候 ， 这 类 能 名 断言 吉凶 的 “宗教 
迷信” 也 就 算是 在 中 国人 的 心中 扎 下 了 根 。 但 很 可 惜 ， 到 
缆 人 也 知道 自己 老 祖宗 留 下 的 这 宕 理论 写 误 解 了 ， 这 次 演 
人 家 的 长 才 都 出 来 辟 语 了 


媒体 的 传播 影响 力 ， 让 地 球 显得 “多 灾 多 难 ” 
芷 实地 震 还 是 那 此 地震， 它 有 规 津 又 随机 地 发 生 着 ,但 它 
从来 不 冰 际 (89 地 方 是 人 烟 移 窗 还 是 人 口 稀少 。 只 不 过 ， 
因为 近年 来 发 生 在 人 口 精 密 的 地 区 的 大 地 震 让 我 们 对 地 震 
比 以 而 更 关注 了 。 谁 还 记得 2001 年 11 月 14 日 发 生 在 青海 昆 
仓 山 的 8 | 地 地震 呢 ? 这 次 地震 是 中 国 近 半 个 世纪 来 最 大 的 
一 次 地 震 。 但 正 因为 它 发 生 在 人 烟 稀 少 的 西部 地 区 ,人员 
财产 伤亡 小 ， 所 以 未 被 大 座 提 及 。 为 什么 未 被 大 众 提 及 ? 
因为 媒人 更 傅 向 于 选择 容易 受到 关注 的 新 闻 事 件 ， 这 些 新 
网 事件 本 就 具备 被 关注 的 固 索 ， 为 什么 未 被 大 众 提 及 ? 因 
为 媒体 更 烦 向 于 选择 容易 受到 关注 的 新 闻 事件 ,这些 新 闻 
事件 本 就 具备 被 关注 的 因素 再 加 上 现代 传 捍 的 快速 立体 化 
报道 方式 ， 以 及 日 其 透明 公开 明 公开 的 信息 流 ， 让 受众 接 
收 的 信息 流 ， 让 受众 接收 明 公开 的 信息 流 ， 让 受众 接收 了 
比 以 往 更 丰富 的 灾难 新 闻 … 


未 日 快 科 吧 4 我 受 凡 了 现在 的 生活 ? 支 
持 我 的 项 我 ? 


中 国 的 专家 又 来 辟 语 了 吧 因 我 反 着 起 
5 


就 对 


网 友 评论 。 近期 专题 


专家 上 个 月 还 说 过 我 国 不 会 有 灾难 性 的 地 吉 
最 


我 就 约 同 了 ， 好 好 过 日 子 行 不 ? 


加 果真 相 全 2013 有 世界 未 日， 于 好 好 珍 殿 到 
在 的 生活 和 


到 次 中 国 所 油 一 注 价 ,当天 必 发 生 大 地 
雷 ， 儿 个 月 前 的 海 庐 地震 和 中 天 


图 25-3 新 闻 专 题 导读 页 面 的 效果 


网 


三 行 依然 分 别 放置 页 头 和 页 
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@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 


《ZE 网 站 文件 综述 


本 网 站 用 到 的 页 面 和 图 片 、CSS 文 件 和 JS 代码 的 位 置 如 表 25-1 所 示 ， 这 里 代码 的 结构 比 
较 复 杂 ， 有 一 个 内 页 面 放置 在 newuser 文 件 夹 里 。 


表 25-1 新 闻 门 户 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
| waibao.html 新 闻 专 题 导读 页 面 
| newuser/n_index.htm 新 闻 分 类 导读 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 和 img2008 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


25.2 规划 首页 的 布局 


一 般 来 说 ， 门 户 网 站 的 首页 比较 长 ， 方 便 容 纳 比 较 丰富 的 信息 。 本 节 我 们 按 DIV 模块 分 
别 说 明 诸多 重要 元 素 的 设计 方式 。 


搭建 首页 页 头 的 DIV 


首页 第 一 行 是 页 头 ， 其 中 包含 了 网 站 的 Logo 图 标 和 广告 位 图 片 ， 效 果 如 图 25-4 所 示 。 


图 25-4 首页 页 头 的 DIV 设计 分 析 图 
实现 页 头 部 分 的 关键 代码 如 下 所 示 。 


1. <div id="header "> 

区 <dl> <! 无 序列 表 - -> 

3 <dt> 

4 <img src="img/ill_logo.gif"><! Logo 图 片 --> 

5 </dt> 

6 <dt class="go_vip" ">&nbsp;</dt> 

这 </dl> 

8 <div id="crazyflash_ad" style="padding- left:305px;"> 

9 <img src=" toolbar/img/banner0l1 .jpg" width="360" height="80" 
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il 第 25 草 “包罗万象 的 新 闻 门 户 网 站 


Ws 
10. </div> 
11. </div> 


请 注意 ， 在 第 2 和 第 3 行 里 ， 用 到 了 dl 和 dt 元 素 。<dl></dl> 可 以 在 网 页 中 创建 一 个 普通 的 
列表 ，<dt>< /dt> 用 来 创建 列表 中 的 上 层 项 目 ，<dd></dd> 用 来 创建 列表 中 最 下 层 项 目 ， 而 且 
<dt></dt> 和 <dd></dd> 都 必须 放 在 <dl></dl> 标 签 对 之 间 。 

在 第 4 行 里 ， 我 们 引入 了 网 站 的 Logo 图 标 ， 而 在 第 9 行 里 ， 放 置 了 广告 图 片 ， 在 第 6 行 
里 ， 通 过 go_vip 的 CSS 代 码 ， 引 入 了 工具 导航 菜单 图 片 。 

go_vip 的 关键 代码 如 下 所 示 。 


1. #header dt.go_vipf{ 

加 float :right; ”// 设 置 向 右 悬 浮 

3 background: url(../img/bg_vip.gif) no-repeat;// 设 置 背 景 图 片 

a width:277px; // 设 置 宽度 

5. 省 略 其 他 代码 

6 

1 

请 注意 ， 在 上 面 代码 第 3 行 的 位 置 ， 通 过 background:url 的 方式 引入 背景 图 片 ， 随 后 在 第 4 
行 里 设置 了 宽度 。 

由 于 在 第 2 行 里 指定 了 向 右 悬 浮 的 布局 方式 ， 所 以 在 ST “ 
定义 页 头 代码 时 ， 先 在 第 6 行 定义 靠 右 的 工具 导航 菜单 ， a | 二 的 
再 通过 第 9 行 的 代码 定位 广告 图 片 。 本 | 过 

娱乐 新 闻 
CB 搭建 新 闻 专栏 部 分 的 DIV 
军事 新 闻 “明星 风采 
vy ee i 乐 

新 闻 专栏 部 分 的 DIV 放 置 的 是 新 闻 导航 菜单 ， 当 鼠 rr 
标 移动 到 导航 菜单 上 去 时 ， 会 相应 地 弹出 子 菜单 ， 效 果 i 
如 图 25-5 所 示 。 图 25-5 新 闻 专栏 部 分 的 DIV 效 果 图 

这 部 分 的 关键 实现 代码 如 下 所 示 。 

1. <divclass="L_content "> 

加 <div id="box_01"> 

3 <dl> 

4 <div id="popup_01"> 

5. <div class="popup_box_L"><! 设置 弹出 菜单 的 CSS- -> 

6 <ul> 

让 se 

2 <1li class="t_ae5700_b"> 新 闻 </1i> 

:六 <! 如 下 是 定义 小 类 的 代码 - -> 

TO 省 略 小 类 信息 

Ls </ul> 

1 </div> 

LS <div class="popup_box_C"> 

14. <ul> 

5 <1i class-"t_ae5700_b"> 娱 乐 </1i> <! 这 里 定义 第 二 个 大 类 - -> 

16. 省 略 其 他 小 类 信息 
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区 </ul> 

18 . </div> 

19 省 略 其 他 大 类 和 人 小 类 的 代码 
20 . </div> 

21. </div> 


上 述 代码 中 ， 第 4 行 定义 了 弹出 菜单 的 CSS 样 式 ， 而 从 第 8~15 行 中 ， 定 义 了 大 类 的 
类 别 ， 从 第 10 行 开始 ， 可 以 放置 小 类 信息 。 这 部 分 的 代码 相当 长 ， 我 们 仅 给 出 一 部 分 作为 示 

弹出 菜单 的 CSS 部 分 关键 代码 如 下 所 示 ， 它 定义 了 菜单 的 背景 图 片 、 背 景 图 颜色 、 边 框 
属性 和 宽度 高 度 。 


1. #popup_0l1{ 

2. // 定 义 背 景 图 ， 而 且 设置 平 铺 和 项 对 齐 

各 background:ur1l(. ./img/popup_01_tit_bg.gif) repeat-x top; 
4. background-color :#FFFFFF; // 定 义 背 景色 

5. // 如 下 定义 边框 

5 border :2px solid #cbcbcb 

了 border-right :2px solid #a5a0a6 ; 

8 border-bottom:2px solid#a5a0a6 


9 . width:308px; // 定 义 宽度 
10. height :293px; // 定 义 高 度 
11. 省 略 其 他 无 关 代码 

2 


ky 


搭建 ”热点 新 闻 ” 部 分 的 DIV 


热点 新 闻 部 分 采用 的 是 头 文字 、 新 闻 文字 、 图 片 结合 的 设计 样式 ， 大 致 的 效果 如 图 25-6 
所 示 。 请 注意 ， 其 中 的 重点 新 闻 的 标题 需要 用 黑体 表现 。 


i 掀 次 发放 实行 发 票 制 ] 
卫视 今 晓 举 行 脾 灾 晚 全 图 片 日 志 : 八方 支援 
最 新 :[ 特 刊 之 玉树 孩子 ] [打工 男子 供 钱 送 亡妻 回 家 ] [感动 瞬间 ] 
热点 -[ 黄 金 玫 握 最 后 一 天 ] [被 埋 者 死亡 率 较 高 ] [玉树 灾区 图 片 ] 
被 困 女 孩 说 打扰 感动 国人 康吉 中 寻找 希望 


关注 :起 乎 寻常 的 规 力 ] [天 堂 的 你 们 一 路 走 好 ] [支援 灾区 的 勇士 ] 
跟 史 :感人 的 救 押 画 面 (图 )] [灾区 救援 进度 分 析 ] [社会 捐助 ] 


图 25-6 热点 新 闻 部 分 的 DIV 效果 图 


这 部 分 的 关键 实现 代码 如 下 所 示 。 
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1| <div id="box_02"> 

加 <h3 style="text-align:1eft"> 热 点 新 闻 </h3> 

3 <div style="border-top: lpx solid #E3E3E3"> 
4. <h3>&nbsp ;</h3> 

后 . <! 定义 黑体 的 新 闻 标题 --> 

6 <h3><a href="newuser/n_index.htm"> 

记 <! 放置 新 闻 标 题 - -> 

8 《十 月 围城 》 横 扫 香 港 金 像 奖 </a>&nbsp;<a href= "# "> 任达华 称 帝 
9. </a></h3> 

10. <p> 省 略 其 他 新 闻 内 容 </p> 

MTs </div> 

12. ”<! 放置 广告 图 片 --> 

Ma <div id="ad_w420_h80" > 


14. <img src=" img/1199006_20100402180543.gif" border="0" /> 
ss </div> 
16. </div> 


我 们 来 看 一 下 上 述 代码 中 用 到 的 CSS 样 式 ， 在 第 2 行 里 ， 通 过 sytle 属 性 定义 了 热点 新 
闻 是 向 左 对 齐 的 。 而 在 第 13 行 ， 通 过 ac_w420_h80 的 这 个 CSS， 定 义 了 广告 图 片 的 样式 ， 
CSS 部 分 的 关键 代码 如 下 所 示 ， 它 定义 了 广告 图 片 的 悬浮 方式 和 左 部 和 底部 的 外 边 距 。 


1. #ad_w420_h80{ 

2 float : left; // 定 义 悬 浮 方式 
margin-left:12px; // 定 义 左边 的 外 边 距 
4 margin-bottom:10px; // 定 义 底部 的 外 边 距 


搭建 ”主题 频道 “部 分 的 DIV 


主题 频道 部 分 的 DIV 中 ， 用 到 了 页 签 的 形式 放置 不 
同 美的 主题 ， 它 与 下 面部 分 的 广告 模块 风格 非常 相似 ， 
所 以 下 面 就 一 起 给 出 效果 图 了 ， 如 图 25-7 所 示 。 3 
主题 频道 部 分 DIV 的 关键 实现 代码 如 下 所 示 。 ET 


了 


着 也 是 用 页 签 , 这 下? 
里 放置 广告 内 容 “| (@ 国 


生活 用 品 2 折 起 ! 多 买 多 送 ? 
生活 用 品 2 折 起 ! 多 买 多 送 
99 高 普 考 4 月 6 日 起 报名 

快 去 里 书 发 表 会 

QL 假日 在 家 的 放松 
生活 用 品 2 折 起 ! 多 买 多 送 


图 25-7 主题 频道 部 分 的 DIV 效 果 


四 
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<div id="box_08"> 


<pc 


lass="tit">&nbsp;</p> 


<div id="tabsl1l"> 


<d 


ivclass="menulbox"> 


<ul id="menul_4"> 
<li id="stgl" class="hover"> 
<! 传媒 "页 签 --> 


9. <ahref="#" onmousedown="adc('93080') ;" target="_blank" class="on"> 


1 
汉 
癌 
4 
呈请 <div id= "menu1l "> 
6 
8 


传媒 </a></1i> 
<! ”商机 "页 签 --> 


<li id="stg2"> 
(局 <ahref="#" onclick="return false;" > 商机 </a></1i> 
14. <! 省 略 其 他 页 签 - -> 
Le </ul> 
16. </div> 
Ts </div> 
1 <div class="mainlbox"> 
LD <divclass="main" id="mainl"> 
20. <ul id="stg_dtl_1" class="block"> 
2 <! 定义 一 个 图 片 + 标题 + 文字 的 新 闻 块 - -> 
C2 <1i> 
3 <h3><a href="#" onmousedown="adc('94280');" target="_blank"> 
24. <img src=" img/n2010033000.jpg" alt="" /></a> 门 户 传 媒 </h3> 
Co <p><a href="#" onmousedown="adc('93081');" target="_blank" > 
26. 酷 6 网 否认 李 善 友 辞 任 CE0</a></p> 
2 </lis 
28. 省 略 其 他 新 闻 块 代码 
29 </ul> 
30， </div> 
31 </div> 
32> </div> 
33. </div> 


在 上 述 代 码 中 ， 第 9 第 10 行 定义 了 ”传媒 ”这 个 页 签 ， 其 他 的 页 签 可 以 按 类 似 方法 编 


写 。 


从 第 20~30 行 ， 实 现 了 一 个 ”图片 + 标题 + 文字 表现 的 新 闻 块 。 其 他 的 同类 新 闻 块 可 以 
按照 相似 的 方法 编写 。 


搭建 ”社会 新 闻 ”部 分 的 DIV 


在 首页 中 ， 
看 的 新 闻 。 这 本 


会 用 很 多 DIV 来 布局 一 类 的 新 闻 ， 这 样 能 方便 访问 者 分 门 别 类 地 找到 想到 查 
以 社会 新 闻 为 例 说 明 这 种 DIV 的 搭建 方式 。 


社会 新 闻 部 分 的 效果 如 图 25-8 所 示 ， 它 们 上 方 放置 了 新 闻 标 题 抬 头 文字 ， 它 的 左边 部 
分 ， 放 置 新 闻 标 题 列表 ， 右 边 部 分 放置 新 闻 图 片 。 
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L 


社会 新 闻 


"091 志 案 组 曝 文 强 案 惊 人 细节 庭审 仅 20 分 神 
"中 科 : 生 求职 职 未 果 下 嫁 ” 中 学 执教 中 
起 检 进 沪 车 辆 欢乐 厨 茜 巡游 方案 揭 


宁 军 总 

罕见 特大 降雪 长 春 大 面积 停 水 图 ) 
* 波兰 总 统 卡 廷 行 有 内 幕 与 总 理 不 和 踏 上 不 归 路 
“* 哈尔滨 遭遇 罕见 特大 降雪 长 春 大 面积 停 水 (图 ) 


图 25-8 社会 新 闻 部 分 的 DIV 效 果 图 


这 部 分 的 关键 现实 代码 如 下 所 示 。 


20. 


<div id="box_07_D"> 
<div id="box_07_D_open"> 
<! 抬头 文字 - -> 
<dl><dt class="tit_L">&nbsp;</dt></dl> 
<div style="float :left;width:55%"> 
<p style= "text-align:left; ">。 
<Ahref="#"> 
091 专 案 组 曝 文 强 案 惊 人 细节 庭审 仅 20 分 钟 
</A> 
</p> 
</div> 
省 略 其 他 社会 新 闻 
</dl> 
</div> 
<! 这 个 放置 图 片 --> 
<div style="float: left"> 
<a href="#"><img src=" img/32063772.jpg" style="width:210px;height : 


Ss 


</a> 
</div> 
</div> 


上 面 代 码 中 的 DIV 并 不 复杂 ， 我 们 来 看 一 下 其 中 重要 的 CSS 样 式 。 
第 2 行 里 名 为 box_07_D_open 的 CSS， 它 作用 到 了 DIV，<dl> 和 <p> 等 元 素 上 ， 关 键 代码 如 
下 所 示 ， 从 中 我 们 能 看 到 ， 由 于 在 第 5 行 里 设置 了 背景 色 为 白色 ， 所 以 头 文字 部 分 的 背景 为 


上 0 了 四 必 mn 一 


色 ， 在 第 13 行 里 ， 定 义 了 dl 部 分 的 背景 图 片 ， 由 此 能 看 到 新 闻 部 分 的 背景 。 


<! 针对 Div 的 CSS 样 式 代码 - -> 
#box_07_D_open { 
clear:both; // 清 空 样式 
width:614px; // 设 置 宽度 
background-color :#FFFFFF ; // 设 置 背 景色 
border :1px#clclcl solid; // 设 置 这 个 DIV 的 边框 样式 
省 略 其 他 无 关 的 代码 


| 
<! 针对 Div 里 d1 部 分 的 的 CSS 样 式 代码 --> 
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10. #box_07_D_ opendl { 


ls float : left:; 
12 width:100%:; 
! 几 交 background: url(../img/box07_tit_abcd_bg.gif) repeat-x top; 
14. 省 略 其 他 无 关 的 代码 
Tb 
EU 搭建 关于 我 们 部 分 的 DIV 
关于 我 们 关于 我 们 部 分 的 样式 比较 简单 ， 其 效果 如 图 25-9 所 
问题 反馈 。 意见 建议 。 新 手 学 党 示 。 
二 人。 折扣。 Englsh 这 部 分 的 实现 代码 如 下 所 示 ， 由 于 比较 简单 ， 所 以 
网 站 公告 校园 服务 。 政府 政策 不 做 详细 说 明 。 


赔 


图 25-9 关于 我 们 部 分 DIV 的 效果 


1. <div id="box_09"> 

2 <pclass="tit">&nbsp;</p> 

| <div id="about_104"> 

4 <ul class=" info"> 

5 <li><a href="#" title="" onmousedown="adc (1758) "> 问题 反馈 </a></1i> 
6 省 略 其 他 的 菜单 文字 

这 </ul> 

8 </div> 

9. </div> 


《CE 搭建 页 脚 部 分 的 DIV 


本 网 站 页 脚 部 分 比较 传统 ， 主 要 放置 了 导航 菜单 和 版 权 声 明 ， 这 里 的 一 个 特色 是 : 导航 
菜单 独立 地 显示 在 页 脚 上 方 ， 而 并 没有 放置 到 框框 里 ， 页 脚 部 分 的 效果 如 图 25-10 所 示 。 


网 


图 25-10 页 脚 部 分 的 DIV 的 效果 


这 部 分 实现 代码 如 下 所 示 ， 请 注意 ， 代 码 第 三 行 里 定义 的 导航 菜单 ， 这 部 分 与 从 第 4 行 定 
义 的 DIV 是 并 列 的 ， 没 有 嵌 套 关系 ， 所 以 从 效果 上 看 ， 导 航 菜单 能 独立 地 显示 在 页 脚 的 顶端 。 


1. <div id="footerbg"> 

2. <! 设置 页 底部 分 的 导航 菜单 --> 

3. <div id="footer_list"> <a href="#"> 设 置 首页 </a> - <a href="#"> 公 司 招聘 </a> 
- <a href="#"> 广 告 服务 </a> - <a href="#"> 客 服 中 心 </a> - <a href="#"> 联 系 方式 </a> - <a 
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href="#"> 保 护 隐 私 权 </a> - <a href="#"> 公 司 介绍 </a> </div> 
4. <div id="footer "> 


罗 <pelasss= tit. > 

> 思 <ahref="#"><img src="img/ill_tel.gif" class="f_left_img" /></a> 

We <ahref="#"> 

3 <img src="img/ill_mail.gif" vspace="4" style="vertical- 
align:middle;"> 

9 . 客服 信箱 </a> 

10 . </p> 

地 时 <! 版 权 声明 部 分 --> 

2 <dt class="copyrigh"> 建 议 使 用 IE6 .0 以 上 浏览 器 浏览 </dt> 

13 <dt class="copyrigh"> 本 站 保留 一 切 权 利 &copy; 2008-2010</dt> 

14 /ps 

15: <ydiv> 

16. </div> 
首页 CSS 效 果 分 析 

本 小 节 将 用 表格 的 形式 ， 整 理 出 首页 中 DIV 和 CSS 样 式 的 对 应 关系 ， 如 表 25-2 所 示 。 由 于 


在 前 文 里 ， 我 们 已 经 给 出 了 一 些 CSS 的 描述 ， 所 以 效果 相同 部 分 ， 这 里 就 不 有 


表 25-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


9 分析 了 。 


DIV 代 码 
<dt class="tit_L"> 会 员 登 
录 </dt> 
<dt class= tit_R ><a 
href= # 新 手 上 路 </ 
a></dt> 


CSS 描 述 和 关键 代码 


定义 靠 左 对 齐 和 人 靠 右 对 齐 的 样式 
dt.tit_L { float:left; 省 略 其 他 代码 } 
dttit R{ 

background: url(../img/box01_tit_R.gif) 
no-repeat right top; } 


效果 图 


<p class= "tit"> <a 
href="#"><img src="img/ 
ill_tel.gif" class="f_left_ 
img" /></a> 

<dl><dt class="tit_ 


L">&nbsp;</dt></dl> 


定义 外 边 距 ， 定 义 字体 对 齐 方式 ， 定 
义 行 高 和 宽度 ， 效 果 如 右 所 示 。 

{ margin:0px; text-align:left; line- 
height: 20px; width:84px;} 


在 CSS 里 引入 背景 图 

dt.tit_L { float:left; background: url(../ 
img/box07_tit_a.gif) no-repeat left top; 
width:91px; padding:0 0 9px 2px;} 
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25.3 ”新 闻 专题 导读 页 面 


在 新 闻 标 题 导读 页 面 中 ， 使 用 较 大 的 篇 幅 放置 专题 性 的 新 闻 ， 下 面 我 们 就 分 析 一 下 这 个 
页 面 上 重要 DIV 的 构造 方式 。 


CE 搜索 部 分 的 DIV 


新 闻 主 题 导读 页 面 的 搜索 模块 能 让 用 户 按 分 类 和 按 新 闻 


国际 财经 ”国内 ”军事 的 关键 字 找 到 感 兴趣 的 新 闻 ， 这 部 分 的 效果 如 图 25-11 所 示 。 

体育 ”科技 ”娱乐 ”汽车 这 部 分 的 关键 代码 如 下 所 示 ， 请 注意 ， 这 里 使 用 了 table 

女性 时尚 手机 。 读书 的 方式 实现 页 面 布局 的 ， 由 于 代码 比较 简单 ， 所 以 不 再 详细 
分 析 。 

| 


出 


Ve 
2 


25-11 搜索 部 分 效果 图 


div id="hotnews"> 
<table width="248" border="0" cellpadding="0" cellspacing="0" 


align="center" class="newsSty"> 


2 


oo o> 


9 


<tr> 

<tdwidth="100%" height="35" colspan="4">&nbsp ;<b> 

<font style= "font-size:13px"> 热 门 搜索 </font></b> </td> 

</tr> 
省 略 无 关 代码 
<! 定义 搜索 外 单 的 按钮 和 接收 搜索 关键 字 的 文本 框 - -> 
<tdheight="25" align="center"> 

<input type=" text" id="key" name="key" style="width:150;height:22"> 
</td> 
<td> 

<img src="toolbar/img/img/btn_1 .gif" width="71" height="22" ></td> 
</td> 
/div> 


新 闻 专题 部 分 的 DIV 


新 闻 主 题 部 分 采用 标题 加 文字 的 样式 ， 在 下 方 还 放置 了 More 按 钮 ， 它 的 效果 如 图 25-12 


所 示 。 


的 新 闻 门 户 网 站 


为 什么 “世界 末日 ” 能够 深入 人 心 

我 们 本 末 就 是 个 爱 八 卦 、 相 信 “天 人 局 应 ”的 国度 诉 纬 ， 
这 个 词 可 能 很 多 人 不 熟悉 ,但 加 果 说 “阴阳 五 行 ”“ 天 人 
感应 ” “下 婆 神 汉 ”， 您 是 不 是 就 明白 了 ? 但 就 这 么 一 个 
人 为 编造“ 预言 " 的 工夫 ， 也 成 为 了 中 国 古代 的 一 种 学 


说 , 还 曾 属 这 旦 放 新 地 时 统 治 者 的 需要 ， 
二 套 “ 理 论 ”。 试想 ， 


在 一 个 和 常设 有 熏 论 自由 、 政 治 民主 、 科 学 法 制 的 封建 时 
代 ， 你 让 一 个 普通 老百姓 怎么 决策 自己 的 人 生 大 事 呢 ?更 
进 论 馅 受 压迫 的 人 民 ， 连 偷偷 蹲 在 墙角 往 木 头 人 身上 扎 针 
的 “出 气 权 ” 都 不 能 有 吗 ? 当 陈 胜 吴广 从 鱼 和 狐狸 身上 找 
到 自己 的 “合法 性 ”的 时 候 ,这 类 能 够 断言 吉凶 的 “宗教 
迷信 ”也 就 算是 在 中 国人 的 心中 所 下 了 根 。 但 很 可 惜 , 玛 
雅 人 也 知道 自己 老 祖宗 留 下 的 次 连 
人 家 的 长 老者 跳出 来 辟 潘 了 More 按 包 


图 25-12 导航 菜单 下 方 的 广告 位 


这 部 分 的 关键 实现 代码 如 下 所 示 ， 请 注意 ， 在 第 8 行 里 ， 通 过 引用 more 这 个 CSS， 在 新 闻 
的 下 方 引 入 了 一 张 图 片 。 


1. <div id="rightside"> 

2 <div id="list"> 

3 <h2></h2> 

4. <div id="caselist"> 

5. <h3><a href="#" class="alllist "> 为 什么 ”世界 末日 "能够 深入 人 心 </a></h3> 
6 <div id=d00 class="news_three "> 

<p> 中 间 省 略 新 闻 . . . </p> 

8 <ahref="#" class="more"></a><! 引入 more 图 片 - -> 

9 </div> 

10. </div> 
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AN 


医院 网 站 


互联 网 是 医院 进行 对 外 宣传 、 展 示 形 象 、 交 流 信息 的 一 个 重要 平台 ， 建 
设 医 院 特色 网 站 ， 是 医院 网 站 持续 发 展 、 提 高 竞争 实力 的 必然 趋势 。 本 章 从 
医院 网 站 建设 应 该 具备 的 功能 和 需要 把 握 的 要 素 ， 重 点 分 析 了 医院 网 站 页 面 
的 设计 样式 。 


26.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 医 院 网 站 的 首页 和 ”专家 介绍 页 面 的 设计 样式 ,而 ”在 线 咨 
询 页 面 风格 与 首页 的 风格 比较 相似 ， 所 以 就 不 再 分 析 了 。 


首页 多 


院 网 站 首页 的 布局 是 非常 常见 的 ， 它 采用 了 三 行 的 样式 ， 其 中 ， 第 一 行 里 放置 网 站 
Logo、 站 内 搜索 、 网 站 导航 、 语 言 选择 等 部 分 内 容 。 第 二 行 里 ， 放 置 了 医院 照片 、 医 
学 导读 、 ”快速 导航 、 ”最 新 新 闻 、 ”便民 导航 等 几 个 部 分 。 在 第 三 行 里 放置 了 部 
分 导航 和 版 权 相 关 链接 ， 如 图 26-1 所 示 。 

在 首页 中 ， 第 二 行 的 内 容 还 是 比较 多 的 ， 其 中 包含 了 图 片 、 导 读 、 预 防 、 新 闻 、 动 态 等 
部 分 内 容 。 


四 | 


和 了 史 禾 专家 介绍 页 


在 专家 介绍 页 面 中 ， 


信息 。 


这 个 页 面 采用 了 


在 线 咨询 


专家 介绍 


特色 科室 


关于 我 们 医院 


第 26 章 ”医院 网 站 


包含 导读 ， 导航 ,健康 
信息 ,新 闻 ， 咨 询 等 


》 更 多 详 
快速 导航 

?会员 萤 录 》 各 科室 开放 时 间 
> 会 员 注 册 > 专家 倡 班 时 间 
> 医院 简介 》 疑难 杂 症 咨询 

》 专家 介绍 ， 在 线 挂号 
最 新 新 闻 

> 心血 管 治疗 有 望 告别 手工 时 代 


》 超 声 : 合 人 工 晶体 植 入 本 
> 一次 性 同时 治疗 近视 和 散光 


?法律 条 款 。 。， 项 目 合作 。 ， 设 备 引进 


医院 网 @ 保 留 一 切 权利 


健康 你 我 
了 解 呼吸 道 感染 预防 哮喘 
引起 上 呼吸 道 大 染 的 病原 体 包括 病毒 、 组 


菌 、 支 原 体 等 臻 病原。 多数 研究 表明 ， 呼 
吸 道 感染 中 以 病毒 为 主 


> 评 组 内 容 

科室 导航 

》 普通 外 科 ( 肛 肠 外 ) 》 皮 肤 科 

， 忆 外科 2 小 由 笠 
TT > 改判 科 
， 重 科 (中 外 种 ) > 心理 笠 

> 医 辽 叶 赵 式 和 组 40 万 村 民 克 上 自来水 
> 省 格 剧 :理疗 尾 色 站 法 让 


》 中 西医 结合 治疗 眼底 病 


友情 提示 ; 本 网 站 信息 公 作 健康 参考 ， 并 非 医 疗 诊 岂 和 治疗 估 据 ， 具体 诊疗 还 请 遵照 经 治 医师 意见 


图 26-1 首页 的 效果 图 


面 的 效果 分 析 


行 样式 ， 其 中 


和 页 脚 。 而 在 第 二 行 里 ， 上 


将 放置 科室 的 分 类 和 专家 介绍 ， 这 个 


页 面 3 


国际 眼科 学 术 会 议 的 


经 中 国 科学 技术 协会 批准 ， 由 上 海 
市 医学 会 眼科 分 会 华东 六 省 医学 
会 眼科 分 会 、 中 华 眼科 学 会 腿 视 光 
学 组 等 共同 主办 的 "国际 (上海 ) 眼 
科学 学 术 .. [详细 } 


准 分 子 矫治 近视 零 风 
险 四 大 定律 

定律 一 : 群众 定律 - 沪 上 50 万 
近视 者 告别 眼科 束缚 。 从 上 个 
世纪 九 十 年 代 上 海 在 全 国 率先 开展 


激光 矫治 近视 手术 以 来 ， 至 尽 已 有 
超过 50 万 近视 加 者 通过 . [详细] 


>» > 页 脚 部 分 
"BERD Rh EF ED 欢迎 来 到 我 们 的 医院 网 站 。 《 动 


上 女 


有 于 介绍 专家 的 相关 


， 第 一 行 和 第 三 行 的 样式 与 首页 完全 一 致 ， 都 包括 页 头 


行 的 效果 图 ， 如 图 26-2 所 示 。 


科室 分 类 导航 结合 专家 介绍 组 成 一 个 模块 ， 这 里 我 们 就 只 给 出 第 
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QQ、|DIV+CSS 由 布局 案例 精粹 (第 2 版 ) 


专家 介绍 专家 将 启 热 绪 02112345678 
> 在 线 预 约 
科室 导航 王 博 士 专家 介绍 
> 门 族 耳 外 只 科 1975 年 毕业 千 上 海 第 二 医科 大 学 医学 系 后 攻读 上 海 第 二 医科 大 学 硕士 开 ES 


究 生 ， 获 医学 硕士 学 位 。 普 在 20 世 纪 80 年 代 赴 法 国法 尔 多 第 二 大 学 Pelleorin 
医院 窗 学 进 个 ， 师 从 国际 公认 的 耳鼻 叭 科 权 威 Michel Porimarn 教 授 。 


> 门 疹 呼吸 科 4 
再 多 医院 耳 役 哗 科 主任 医师 | ta 给 此 
> 口 计 商 由 基 和 多 2 
本 

> 口 闪 二 妆 病 
> 口 闪 有 条 

开 诊 时 间 一 一 
其 它 不 定期 开 诊 专家 由 上午 预约 
一 。 周 四 全 天 预约 德 思 医 学 奖 

开 诊 科 室 

。 门诊 耳 身 噬 科 
专家 最 近 留 言 


这 次 节 耻 日 不 休息 ， 全 天 六 论 


ose 


图 26-2 专家 页 面 的 效果 图 


C5 民有 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 26-1 所 示 。 
表 26-1 医院 网 站 文件 和 目录 一 览 表 


模块 名 
页 面 文件 index.html 


three.html 


css 目 录 之 下 所 有 扩展 名 为 css 的 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 
img 目 录 之 下 所 有 的 图 片 


26.2 ”规划 首页 的 布局 


的 设计 样式 。 
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因为 是 医院 网 站 ， 所 以 网 站 的 首页 导航 比较 多 ， 本 节 我 们 就 来 依次 分 析 首页 的 重要 


部 分 


第 26 章 ”医院 网 站 


搭建 首页 页 头 部 分 


部 分 ， 它 包含 了 网 站 Logo 部 分 、 网 站 的 导航 部 分 ， 站 内 搜索 
分 的 效果 如 图 26-3 所 示 。 


PR 
加 | 


在 线 咨询 专家 介绍 特色 科室 美 于 我 们 医院 


图 26-3 首页 页 头 设计 分 析 图 


页 头 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <div id="header-global "> 
2. <arel="nofollow" href="index.html" id="logo-w-header"><img id="1logo-w" 
src="img/logo_W_8b_a.png" width="132" height="66" /></a> 


3 <div id="utility"> 

4. <ul> 

ns <li class="wai"><ahref="#main"> 返 回首 页 </a> </1i> 

6. <1i> <a href="#"> 中 文 版 </a> </1i> 

FE <li><a rel="nofollow" href="#">English</a></1i> 

8. <1i> <arel="nofollow" href="#"> 日 本 语 </a> </1i> 

有 </ul> 

10. </div> 

ll. <div id="search-site"> 

1 <p> 

TS <input type="hidden" name="collection" value= westpac /> 

1 <input class="txt" name="query” id="query”type="text" value=" 请 选择 " 
title="Search this site" /> 

15s <input class="btn" type="image" src="img/btn_go_searchbox.png" 
alt="Go" /> 

16 . </p> 

17. </div> 

18. <div id="wpr-nav-primary"> 

19 . <ul id="nav-primary"> 

2 <liclass="home"> <ahref="index.html"><i> 首 页 </i></a> </1i> 

2 

2 </ul> 

23. </div> 

24. </div> 


在 上 述 代 码 中 ， 第 2 行 定义 了 网 站 的 Logo 部 分 ， 第 3~10 行 定义 了 语言 选择 部 分 ， 第 11~17 
行 定义 了 站 内 搜索 部 分 ， 第 18~23 定 义 了 导航 部 分 。 

其 中 ， 第 1 行 引用 了 一 个 名 为 header-global 的 CSS， 在 这 个 CSS 中 定义 了 页 头 部 分 的 背景 
图 片 ， 其 代码 如 下 所 示 。 
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1. #header-global { 
2 position:relative; 
3 background:url(../img/bg_header_singlepiece_8b_a.png) no-repeat 


left bottom:; 


4. /* 定义 背景 图 片 */ 


5 min-height :83px; /+* 定义 最 小 高 度 */ 
[3 售 padding-bottom: 42px:; 

人 z-index:10; 

Se 


搭建 ”医学 导读 、 部 分 的 DIV 


医学 导读 部 分 DIV 包含 了 医院 图 片 和 医学 常识 和 
快速 导航 三 个 部 分 ， 这 部 分 的 效果 如 图 26-4 所 示 。 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


ee 
长 期 的 慢性 病 。 暑 喘 是 能 饮 控 
的 ， 但 尚 不 能 达到 "根治 "。 所 以 


图 26-4 医学 导读 部 分 的 DIV 效果 图 


1. <divclass="cl"> 

2 /* 图 片 部 分 */ 

二 <div class="promo-primary"> 

4. <h2> - </h2> 

1 <a lasss" non” hrefe "SS<1np stts 1meE/heo 3= 


WereMakingSuperSimple_335x175.jpg” width="335" height="175" /></a> </div> 
6. /* 导读 部 分 */ 


Ts <divclass="solutions"> 

8. <h2> 医 学 导读 </h2> 

S5 <ul style="background- image:url (img/atn_daytoday .png) ; "> 

10. <1li class="promo-solution"> <ahref="#"> 哮 喘 患 者 的 四 大 疑问 </a> <i> 哮 喘 
是 一 种 长 期 的 慢性 病 。 哮 喘 是 能 够 控制 的 ， 但 尚 不 能 达到 ”根治 "。 所 以 </i> </1i> 

志 藉 <1li class="more"> <ahref="#"> 更 多 详细 内 容 . . .</a> </1i> 

2 </ul> 

1 </div> 
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et 第 26 齐 “医院 网 站 


14. /* 导航 部 分 */ 


LSs <div class="products"> 

16. <h2> 快 速 导航 </h2> 

I <ul> 

18. <1i> <a href="#"> 会 员 登 录 </a> </1i> 
19. 

20; </ul> 

21: <ul> 

222 <1i> <a href="#"> 各 科室 开放 时 间 </a> </1i> 
3 

24. </ul> 

DG </div> 

26. </div> 


在 上 述 代码 中 ， 第 2~4 行 是 医院 图 片 部 分 ， 第 
7~13 行 是 医学 导读 部 分 ， 第 15~25 行 是 快速 导航 部 
分 5 

这 里 要 注意 的 就 是 第 9 行 的 ul， 这 个 ul 引用 了 一 张 
背景 图 片 ， 这 样 就 使 得 它 与 ”健康 你 我 ”部 分 看 起 来 
不 同 了 。 


搭建 ”健康 你 我 ”部 分 的 DIV 和 


健康 你 我 ”部 分 也 是 由 图 片 、 医 学 常识 、 导 航 
部 分 组 成 的 ， 因 为 这 部 分 代码 搭建 方式 与 医学 导读 部 
分 是 一 样 的 的 ， 所 以 这 里 就 只 给 出 效果 图 ， 代 码 就 不 
再 重复 给 出 了 ， 效 果 如 图 26-5 所 示 。 


可 搭建 ”最 新 新 闻 ”部 分 的 DIV 图 26-5 健康 你 我 部 分 DIV 的 效果 图 
最 新 新 闻 部 分 位 于 正文 左边 部 分 的 最 后 一 部 分 ， 它 包含 了 最 新 的 医学 方面 的 新 闻 ， 这 部 
分 的 效果 如 图 26-6 所 示 。 
最 新 新 闻 
》 心 血管 治疗 有 望 告 史 * 手 工时 代 * > 医院 路 术 苇 升 绍 _40 万 村 民 唱 上 自来水 
> 起 声 乳 化 联合 人 工 晶体 植 入 术 ? 连 丁 格 吊 :理疗 特色 疗法 克 纪 视 
> 一次 性 同时 治疗 近视 和 散光 》 中 西医 结合 治疗 户 度 病 


最 新 新 闻 部 分 


图 26-6 最 新 新 闻 部 分 的 效果 


下 面 给 出 这 个 DIV 的 关键 代码 。 
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1. <div id="news"> 

2 <h2> 最 新 新 闻 </h2> 

3 <ul> 

4 <1i> <ahref="#"> 心 血管 治疗 有 望 告别 手工 时 代 "</a> </1i> 

5. <1i> <ahref="#"> 医 院 跨越 式 升级 40 万 村 民 喝 上 自来水 </a> </1i> 
6. <1i> <ahref="#"> 超 声 乳化 联合 人 工 晶体 植 入 术 </a> </1i> 

也 <1i> <ahref="#"> 海 丁 格 刷 + 理 疗 特色 疗法 克 弱 视 </a> </1i> 

8 <1i> <ahref="#"> 一 次 性 同时 治疗 近视 和 散光 </a> </1i> 

9 . <1i> <ahref="#"> 中 西医 结合 治疗 眼底 病 </a> </1i> 
IgEXul> 
ll: </div> 


搭建 ”便民 导航 ”部 分 的 DIV 


在 便民 导航 部 分 中 ， 医 疗 服务 部 分 与 医学 中 心 部 分 
的 搭建 方法 相差 不 多 ， 这 部 分 的 效果 如 图 26-7 所 示 。 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


图 26-7 便民 导航 部 分 的 DIV 效果 图 


1. <div class="cl"> 
<h2> 便 民 导 航 </h2> 
K 甘 <a id="btn-applyonl inefor" href="#"><img src=" img/btn_applyonline- 


select .png" width="193" height="24" /></a> 


4. <div id="menu-applyonline"> 

3 <ul> 

6. <1i> <a href="#"> 中 医科 </a> </1i> 
Ts 

8. </ul> 

9 </div> 

10. </div> 

Dis <div class="c2"> 

ls <h2> 医 疗 服务 </h2> 

13. <ul> 

14. <1i> <ahref="#" rel="nofol1ow"> 门诊 服务 </a> </1i> 
5 

16 . </ul> 

I </div> 

让 :六 <divclass="c3"> 

19. <h2> 医学 中 心 </h2> 
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20: <ul> 

2 <1i> <a href="#" target="_blank"> 微 创 外 科 临 床 医学 中 心 </a> </1i> 
2 过 

2 </ul> 

24. </div> 


这 里 要 注意 的 是 第 3 行 的 下 拉 列 表 框 ， 这 个 下 拉 列 表 框 由 图 片 和 DIV 组 合 而 成 ， 下 拉 列 表 
的 代码 是 第 4~10 行 。 


UN 洲 搭建 ”资讯 部 分 的 DIV 
资讯 部 分 的 DIV 是 主体 部 分 的 最 后 一 部 分 ， 这 部 分 主要 包 


; 的 1 国际 眼科 学 术 会 议 的 
含 医学 的 最 新 资讯 ， 其 效果 如 图 26-8 所 示 。 sh 
这 部 分 关键 代码 如 下 所 示 。 i 
科学 学 术 .,[ 洗 细 ] 
1. <divclass="c4"> 
2. ”<h2> 国 际 眼 科学 术 会 议 的 </h2> 准 分 子 矫治 近视 零 风 
3 <p> 经 中 国 科 学 技术 协会 批准 ， 由 上 海 市 医学 会 眼科 分 会 、 险 四 大 定律 


/p> 和 
4. </div> 世纪 九 十 年代 上 海 在 全 国 率先 开展 

5. <div class="c4"> 起 0 资讯 部 分 jissg 

6. ”<h2> 准 分 子 矫治 近视 零 风险 四 大 定律 </h2> 

7.， ”<p> 定律 一 : 群众 定律 - - 沪 上 50 万 近视 患者 告别 眼镜 束缚 图 26.8 资讯 部 分 部 分 的 DIV 
</p> 

8. </div> 


CEA 搭建 页 脚 部 分 的 DIV 


首页 页 脚 部 分 包含 了 部 分 导航 、 版 权 说 明 、 网 站 Logo 等 部 分 内 容 ， 效 果 如 图 26-9 所 示 。 


欢迎 来 到 我 们 的 医院 网 站 (CP 


友情 提示 ; 本 网 站 信息 仅 作 健康 参 者， 并非 医疗 诊 朵 和 治疗 请 需 ， 具 体 诊疗 还 请 遵照 经 治 医 师 意见 
医院 网 日 保留 一 切 权利 


图 26-9 页 脚 部 分 的 DIV 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <div id="footer-global "> 

2 <div class="sleeve "> 

过 XGO 

4. <arel="nofollow" href="index.html" id=" logo-w-footer"> 

5. <img id="logo-westpac" src="img/logo-westpac.png"” width="346" 
height="50" /></a> 


QDvicss missense (#25 a—q〈—_l_(o 
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/* 导航 */ 
<ul> 
<li class="contactus"> <ahref="#" rel="nofol1ow"> 联 系 我 们 </a> </1i> 


</ul> 
<ul> 
<liclass="siteindex"><ahref="#"> 网 站 地 图 </a> </1i> 
</ul> 
<ul> 
<li class="security"><ahref="#" rel="nofol1ow"> 法 律 条 款 </a> </1i> 


</ul> 
/* 版 权 说 明 */ 
<p> 友情 提示 : 本 网 站 信息 仅 作 健 康 参考 。 </p> 
<p> 医 院 网 &copy ; 保留 一 切 权利 </p> 
</div> 
</div> 


首页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 


DIV 代码 


<div class="solutions"> 定义 DIV 的 上 边框 的 宽度 、 颜 色 


页 中 其 他 CSS 的 效果 ， 如 表 26-2 所 示 。 


表 26-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
CSS 描 述 和 关键 代码 效果 图 
.solutions, #home .products { 


margin:15px 0 30px; 
border-top:2px #46403b 


是 一 种 长 


solid; 喀 喘 
制 的 ， 但 尚 不 
background:no-repeat right 
top; 
: 
<li class="more"> 定义 字体 为 粗 体 


. li.more, a.more { 


font-weight:bold; 


| 本 定义 字体 为 宜 休 
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26.3 专家 介绍 页 面 


专家 介绍 页 面 主 体 部 分 由 三 列 组 成 ， 左 边 为 科室 列表 ， 中 间 是 专家 的 信息 介绍 ， 右 边 为 


专家 相关 的 荣誉 信息 。 


专家 介绍 页 面 左 边 科 室 列表 的 DIV 


专家 介绍 页 面 左边 的 科室 列表 使 用 了 ul 和 1i 进 
行列 表 设计 ， 其 效果 如 图 26-10 所 示 ， 这 里 我 们 就 


需要 使 用 CSS 的 方式 来 实现 。 


上 图 列表 包含 在 nav-tertiary 父 类 容器 内 部 ， 这 
里 我 们 只 将 项 目 列 出 来 ， 如 果 要 增加 相关 标题 的 


话 ， 实 现代 码 如 下 所 示 。 


图 26-10 科室 列表 DIV 效 果 图 


<liclass="item selected"><ahref="three.html "> 门诊 耳鼻 喉 科 </a> </1i> 


> 门诊 呼吸 科 </a> </1i> 
> 门诊 高 血压 </a> </1i> 
> 门诊 感染 病 </a> </1i> 
> 门诊 骨科 </a> </1i> 


1. <div id="nav-tertiary"> 

2 <div class="menu-heading"> 

3 <div> &#160; </div><! 这 里 可 以 添加 标题 - - - -> 
4 </div> 

5 <ul id="content-navigator "> 
6 

4 <liclass="item"><ahref="#" 
:这 <liclass="item"><ahref="#" 
上 后 <liclass="item"><ahref="#" 
lo <liclass="item"><ahref="#" 
LL; </ul> 

12. </div>> 

以 下 是 相关 CSS 样 式 代码 。 


#nav-tertiary { 
display :none; 
width:240px; 
margin-bottom:30px; 


8 


padding: 10px 0 15px 0; 
margin:0; 
color :#46403b; 


0 font-size:240%; 
YL 


1 
吕 
3 
4 
5 
6. #main#nav-tertiary .menu-heading { 
7 
8 
9 
1 
L 


border-bottom: 1px #46403b solid.; 
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GDV+CSS marmeem (#75) LE 


1 text-align: left; 

I 

14. #nav-tertiary .menu-heading { 

15-: border-bottom:2px #fff solid: 

6 

17. #nav-tertiary .menu-heading a.back { 

8， font-size:50%; 

19. padding- left :10px:; 

20; background:url(../img/icon_chevron_right_secondaryred.png) no- 
repeat 0 .3em; 

Fe 

22. #nav-tertiary .menu-headinga.selected { 

23: color :#bc1903 ; 

24. text-decoration:none; 

De cursor :default ; 

26. } 

27. #nav-tertiary .menu-headinga.selected i{ 

2 position:absolute; 

205 left:-10000em; 

SO 

Sy 


从 上 述 样 式 表 代码 中 ， 我 们 看 到 nav-tertiary 样 式 的 继承 使 用 ， 从 默认 指定 ID 的 样式 ， 到 
main 中 nav-tertiary 样 式 的 定义 ， 我 们 可 以 为 某 项 具体 的 区 域 做 单独 样式 定义 。 但 是 要 注意 的 
是 ，CSS 中 大 量 使 用 继承 ， 会 使 样式 表 相 对 复杂 ， 不 利于 日 后 维护 ， 所 以 要 注意 尽量 使 用 较 
少 层次 的 继承 。 


家 介绍 页 面 中 间 部 分 的 DIV 


专家 介绍 页 面 中 间 部 分 分 成 两 部 分 ， 上 面 
i 部 分 是 专家 信息 的 介绍 ， 下 面部 分 是 专家 相关 


ke 曾 在 20 世 纪 90 征 开国 下 不 多 第 二 大 学 Pelegn 仁 息 显示 
修 ， 师 从 国际 公认 的 卫生 叭 科 权 威 Michel Porimann 孝 授 。 信息 显示 。 


金 医 院 耳 奥 叭 科 主 任 医师 、 硕 士 生 导师 ， 同 时 瘟 任 先 来 介绍 上 上 面 部 分 介绍 专 家 信息 的 DIV » 


业 技 术 职务 评审 委员 会 委员 、 上 海 市 残疾 技术 鉴定 委 六 一 > 二 ~: ~ 
和 华 医学 会 上 海 市 耳鼻 喉 科学 分 会 委员 。 ”由 于 长 期 工作 其 效果 如 图 26-11 所 小， 我 们 不 做 详细 说 
， 因 此 对 专业 领域 内 烽 难 好 症 的 诊治 具有 丰富 的 临床 经 
险 ， 特 别 在 耳 科 疾 病 与 听力 学 方面 、 在 头颈 部 肿瘤 与 阻 守 性 睡眠 呼吸 暂停 综 明 o 
合 征 的 诊治 等 方面 更 有 深入 的 研究 。 在 国内 外 考 业 期 刊 末 志 上 发 表 学 术 论文 


实现 此 部 分 的 DIV 代码 如 下 所 示 。 


网 


26-11 专家 信息 介绍 展示 效果 
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1. <div id="header-content"> 
2 <h2> 王 博 士 </h2> 
局 <ul id="taskbar "> 
二 <1i> <ahref="#"class="print"> 预 约 </a> </1i> 
信 </ul> 
和 5 </div> 
Te <div id="content-primary" class="cms-content "> 
8. <div> 
9. <p>&nbsp;&nbsp;1976 年 毕业 于 上 海 第 二 医科 大 学 医学 系 , 后 攻读 上 海 第 二 医科 大 学 硕 
士 研究 生 ”</p> 
10. <h4> 开 诊 时 间 </h4> 
ls <ul> 
12 <1i> 周一 上 午 <a href="#"> 预 约 </a> </1i> 
全 <1i> 周 四 全 天 <a href="#"> 预 约 </a> </1i> 
14. </ul> 
eR <h4> 开 诊 科室 </h4> 
16. <ul><1i> <a href="#"> 门 诊 耳鼻 喉 科 </a> </1i></ul> 
目 生 </div> 
18 . <div class="notes "> 
Lo <div class="sleeve "> 
20. <h6> 专家 最 近 留言 </h6> 
21 <ul class="footnotes"><1i> 这 次 节假日 不 休息 ， 全 天 义诊 </1i></ul> 
2 </div> 
SR </div> 
24. </div> 


上 述 代码 自 上 而 下 设计 ， 分 别 实现 了 标题 、 内 容 、 相 关 信息 ，CSS 代 码 如 下 所 示 。 


#main #header-content h2 { 


132 


} 


padding: 10px 0 15px 0; 

margin:0; /***<*<*// 无 外 边 距 *******/ 
color :#46403b; 

font-size:240%; 


border-bottom: 1px #46403b solid; // 底 边框 的 边框 线 样式 sol id 表示 实 线 


text-align: left.; 


#taskbar { //ID 选 择 器 定义 样式 


overflow:hidden; /**** 超 过 容器 部 分 隐藏 **+***/ 
float :right ; 。。/**** 流 输出 从 右 开始 *****/ 
padding:7px0; 


14. #header-content #taskbar 1i{ 


15. 
18: 
1 


’ 


float:left; 
margin:0 -16px 0 16px:; 


18. #taskbar liat{ 
display:-moz-inline-box; /******// 指 定 taskbar 内 的 11i 的 默认 样式 


19: 


玉 求 求 冰冰 来 来 六 人 


由 


21. #taskbar lia{ 


人 


display:inline-block; /****// 一 行内 块 状 显示 ****/ 
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GDV+CSS mammnmmr (25) =®*sS>®Q,c®WBeCas. Ses". 


2 font-size:110%; 

24. color :#46403b ; 

25° line-height:17px; /****/ 内 容 区 域 的 高 度 ， 即 行 高 ****/ 
263 border-right:1px#666 dotted 

ye margin-right :8px; 

23 padding: lpx 10px lpx 25px; 

29. background:url(../img/icon_toolbar_sprite.png) no-repeat 0 50%; 
30，/****x*x*#+// 指 定 背景 图 片 (不 平 铺 ) 从 左边 的 中 间 位 置 定位 ， 如 图 九 所 示 ******/ 
Sl text-decoration:none ; 

32 直 

33. #content-primary p, #content-secondarypP{ 

34. line-height:1.5; 

35 

36. .cms-content h3 { 

37% padding- top: 8px; 

38R /A*** 本 代码 略 ***/ 

39.} 

40. .cms-content h3 .first { 

41. border-top:none; 

42.} 

43. .cms-content h3a{ 

44. border-bottom:2px #46403b sol id:; 

45. /**** 代 码 略 ***/ 

46. } 

47. .cms-content h3a:hover { 

48. border-bottom:2px solid #bc1903; 

49 . color :#bc1903; 

SO text-decoration:none ; 

LS 

52. <!------ // 以 上 内 容 区 域 ------------------ ee 


53. div.notes, .type-a #content-primary div.notes, .type-b #content-primary 
div.notes, .type-c #content-primary div.notes, .type-d#content-primary div.notes 


| 
54 . border-top: lpx #dedcda solid; 
与 5 margin:20px 0; 
508 padding-top: 10px; 
人 
i // 以 上 相关 区 域 样式 ， 其 他 样式 略 --------------- > 


上 面 我 们 列 出 了 大 部 分 样式 ， 主 要 包括 标题 、 内 容 和 相关 区 域 的 样式 代码 ， 代 码 比 较 简 
单 、 比 较 特殊 的 样式 ， 已 经 加 上 注释 ， 这 里 不 做 过 多 介绍 。 
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星光 灿烂 的 娱乐 这 
资讯 网 站 第 27 昔 


娱乐 资讯 网 站 由 于 包含 了 娱乐 圈 里 的 时 尚 新 闻 和 最 新 资讯 ， 所 以 颇 受 一 
些 “ 八 卦 ” 迷 的 喜好 ， 这 类 网 站 通过 发 布 一 些 “ 星 闻 ” 和 “独家 消息 ”, 也 
能 积聚 到 一 定量 的 人 气 。 

为 了 更 好 地 吸引 流量 ， 所 以 这 类 网 站 首页 要 具备 美观 的 界面 和 丰富 的 资 
讯 ， 这 样 才能 让 一 些 偶尔 路 过 的 访客 关注 本 网 站 ; 其 次 要 不 断 更 新 ， 不 能 把 
一 些 陈 年 旧账 放 在 页 面 上 ， 要 用 “ 星 闻 ” 留 住 访客 。 本 章 我 们 就 来 分 析 一 下 
这 类 网 站 的 实现 方式 。 


27.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 娱 乐 资讯 网 站 的 首页 和 ”明星 照片 ”两 个 页 面 的 设计 样式 ， 而 
资讯 要 闻 ”页 面 风格 比较 简单 ， 所 以 就 不 再 分 析 了 。 


《ZE 首页 效果 分 析 


娱乐 资讯 网 站 的 首页 布局 是 非常 美观 的 ， 我 们 采用 了 五 行 ”的 样式 ， 其 中 ， 第 一 行 里 
放置 包含 Logo 图 片 的 页 头 部 分 。 第 二 行 里， 放置 本 网 站 的 菜单 导航 条 。 在 第 三 行 里 ， 放 置 网 
主题 性 图 片 ”， 包 括 广 告 、 抬 头 图 片 等 内 容 。 第 四 行 是 网 站 的 主体 部 分 ， 包 括 ” 娱 

乐 要 闻 和 ”新 闻 图 片 ” 等 元 素 。 最 后 一 行 ， 是 页 脚 部 分 ， 其 中 包括 导航 菜单 、Logo 图 标 和 


于 首页 的 篇 幅 较 长 ， 我 们 通过 两 个 图 来 展示 首页 的 整体 样式 。 图 27-1 展 示 了 首页 上 半 
部 分 前 3 行 的 样式 。 图 27-2 展 示 了 首页 后 2 行 的 效果 。 


QQ、|DIV+CSS 网 站 布局 案例 精 入 (第 2 版 ) 


讯 “明星 西片 业界 动态 


小 道 消息 。 。 博客 


陶 大 宁 为 同胞 尽 绵 力 街头 指 铁 被 
人 图 /图 ) 


-流星 花园 》 演员 欧 定 兴 


访 兰 斯 基 律 师 称 引 波 理 由 不 充分 


高 清 : 《七 仙女 》 新 剧照 唱 光 


网 
RS 
匣 | 
习 
吾 | 

wo 
本 
下 
深 
汀 
加 


快 来 加 入 我 们 的 社区 吧 


“2010 年 不 能 错过 
好 莱 : 年 的 大 幕 已 经 拉 和 起 ， 
我 们 精 选 区 部 不 可 异 过 的 盛宴 


廊 者 评选 (3 投票 ) 


* 查 看 全 部 评选 


网 


27-2 首页 后 两 行 的 效果 图 
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明星 介绍 页 面 的 效果 分 析 


在 这 个 娱乐 资讯 的 网 站 里 ， 明 星 信息 是 主体 ， 所 以 在 这 类 ”明星 介绍 页 
图 文 并 茂 的 形式 介绍 当红 明星 以 及 这 些 明 星 的 最 新 资讯 。 

明星 介绍 页 面 的 页 头 和 页 脚 部 分 与 首页 很 相似 ， 首 页 主体 部 分 分 为 三 列 ， 效 果 如 图 27-3 
所 示 。 


绰 
这 


台湾 小 天 后 张 疮 耶 桂 带 米 , 
|| 区 乐风 内村 
er 中 | 重 磅 ， 地 连 杰 熙 项 福 博 人 气 王 块 乐 大 本 营 找 家 怒 齐 落户 
。 章子怡 承 话 供 午 女 上 学 邵东 欣 et 苦 水 唱 从 艺术 山 
。 谢 旺 峰 片 机 于 她 三 地 黄 立 行 与 女友 

1) 进 被 旭 是 同性 恋 罗 伯 区 六 

映 其 自 焊 三 亚 私 房 昭 
。 萄 红 建 委 阴 1 为 划 基 /图 ) 际 焊 州 仇 针 蒜 人 六 7 几 

辽 映 其 自如 三 亚 私房 照 (图 ) 张 界 巴 分享 护肤 心得 


亲 订 等 妇 丰 1 有 内 配 竹 / 图 了 尘 州 继 纤 杰作 基 7 攀 


会 次 明星 捐款 ”林志玲 矢 款 捐 玉树 地 冰冰 植树 支 持 公益 


网 


27-3 明星 介绍 页 面 
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《ZE 网 站 文件 综述 


这 个 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 27-1 所 示 。 


表 27-1 娱乐 资讯 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 
| photos.html 明星 介绍 页 面 
| shownew1.html 资讯 信息 页 面 
css 目 录 | 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


27.2 ”规划 首页 的 布局 


首页 中 包含 的 内 容 比 较 丰 富 ， 下 面 我 们 就 来 依次 看 一 下 首页 中 比较 重要 的 DIV 的 实现 
方式 。 


首页 页 头 的 DIV 


这 个 娱乐 资讯 网 站 页 头 部 分 包括 网 站 Logo 部 分 和 网 站 的 导航 部 分 ， 效 果 如 图 27-4 所 示 。 


图 27-4 首页 页 头 设计 分 析 图 


页 头 的 关键 实现 代码 如 下 所 示 。 


1. <div id="cHeader "> 

2 <! 放置 Logo 图 片 - -> 

KK <a id="1logo" href="index.html"> 娱乐 资讯 </a> 

4 <div class="right"> 

证 <div class="top "> 

和 二 <ul class= "links"> 

a <li class="signup"><a href="#"> 注 册 </a></1i> 

8 <liclass="1login panelButton"><a href="#"> 登 录 </a></1i> 
9. <li class="cart"><a href="#"> 我 的 账号 </a></1i> 

10. </ul> 


il 第 27 章 星光 灿烂 的 娱乐 资讯 网 站 


出 尖 


<input name="q" type=" text" id="headerSearch" value=" 搜 索 " /> 


2 <input type="submit" class="search-button" value=" " /> 
1 <div class="clearer "></div> 

14. </div> 

15. <ul class="subnav "> 

16 . <1i><ahref="#"> 近 期 热门 </a></1i> 

7 <1i><ahref="#"> 娱 乐 资讯 </a></1i> 

18 . <1i><ahref="#"> 业 界 动态 </a></1i> 

19 . <1i><ahref="#"> 业 界 新 闻 </a></1i> 

20 . <liclass="1ast"><a href="#"> 小 道 消息 </a></1i> 
Zi <liclass="rss"><ahref="#"> 免 费 订 阅 </a></1i> 
2 <ul 

23. </div> 

24. </div> 

上 面 代 码 


中 在 第 7 行 


中 台 阅 中 团 必 同一 


《ZE 搭建 ”网 站 导航 菜单 “部 分 的 DIV 


#cHeader #1ogo { 


} 


display:block; 

float :left; /* 设 置 悬浮 方式 */ 
width:252px; 

height :78px; 

padding- left :4px; 


ph， 第 3 行 放置 页 头 部 分 的 Logo 图 标 ， 第 5~10 行 里 ， 定 义 了 注册 和 登录 部 分 的 
功能 模块 ， 第 15~22 行 里 ， 定 义 了 页 头 部 分 的 导航 菜单 。 

在 第 3 行 引 入 Logo 图 标 部 分 是 通过 ID 为 logo 的 CSS 来 实现 的 ， 这 部 分 的 代码 如 下 所 示 ， 其 
Ph ， 通 过 background:url 来 指定 Logo 图 片 。 


background:url(../img/logo-centralpark.gif) no-repeat 4px 0; 


text-indent:-10000px; 


在 首页 页 头 下 方 是 整个 网 站 的 导航 菜单 ， 其 效果 如 图 27-5 所 示 。 


[ea 
DK 


Ak 
2 
忆 信 
4. 
5 
6 


分 的 关键 实现 代码 如 下 所 示 ， 它 使 


<div id="cMenu "> 


虽 


27-5 企业 简介 部 分 的 DIV 效果 


<ul> 


图 


了 ul 和 li 来 定义 段落 。 


<li class="home"><ahref="index.html"> 首 页 </a></1i> 


info"><a href="photos .html "> 娱乐 新 闻 </a></1i> 


<li class="zoo"><ahref="shownewl .html "> 资讯 </a></1i> 
<1li class="photos"><a href="index .html "> 明星 图 片 </a></1i> 


347 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 


348 


TR <1li class="events"><a href="shownewl .html"> 业 界 动态 </a></1i> 


Oo 


<liclass=" 


9. <liclass 


签 上 ， 相 关 代码 如 下 所 示 。 


attractions"><ahref="photos.html"> 小 道 作 封 </a></1i> 
sports"><a href="shownewl .html"> 博 客 </a></1i> 

0 <li class="activities"><a href="#"> 嘉 宾 聊 天 </a></1i> 

1 <li class="maps"><a href="#"> 大 片 </a></1i> 

2 <1li class="history"><ahref="#"> 音 乐 库 </a></1i> 

3. <liclass="store"><ahref="#">#</a></1i> 
4 

5 


在 第 1 行 里 ， 引 入 了 ID 为 CMenu 的 CSS， 这 个 CSS 作 用 范围 比较 大 ， 它 能 作用 到 ul 和 li 等 标 


#cMenu { 
2 width:800px; 
3 height :34px; 
4. overflow:hidden; 
5 
6. #cMenu ul { /* 针 对 ul*/ 
~ list-style-type:none,; 
So 
9. #cMenuul 1i {/* 针 对 ul 下 的 1i*/ 
10: height :34px; 
I margin:0; 
Ls padding:0; 
13. float :left,; 
14. } 
15. #cMenu ul 1i a { /* 针 对 诸如 第 3 行 里 的 a 标记 */ 
LGs display:block; 
dn: text-indent:-10000px; 
18. background- image:url(../img/header .png):; 
19. background- repeat :no-repeat ; 
20 height :34px; 
2 padding:0 lpx00; 
2 


搭建 ”娱乐 要 闻 “部 分 的 DIV 


贺 乐 要 闻 


[ 导 谊 关键 间 : 流浪 情欲 寻根 吴 
彦 福 做 客 谈 婚 事 些 舍 


27-6 娱乐 要 闻 部 分 DIV 的 效果 


出 


四 


娱乐 要 闻 部 分 使 用 了 标题 + 图 片 + 文 字 的 样式 ， 
它 位 于 网 站 的 上 部 分 ， 其 效果 如 图 27-6 所 示 。 

娱乐 要 闻 部 分 现实 代码 如 下 所 示 ， 其 中 ， 在 第 2 行 
显示 的 是 头 文字 ， 在 第 3 行 里 ， 放 置 的 是 娱乐 要 闻 的 
图 片 ， 而 在 第 4~6 行 里 ， 放 置 的 是 图 片 下 的 新 闻 。 


fu 


ii 第 27 章 星光 灿烂 的 娱乐 资讯 网 站 


许 


<div class="event-con"> 
<h2 class="title"> 娱 乐 要 闻 </h2> 
<div class="pic"><ahref="#"><img src=" img/ev_0c294. jpg" /></a></div> 
<h2><ahref= "#">《 如 梦 》 公 映 吴彦祖 袁泉 参 演 改 变 爱情 观 </a></h2> 
<p> [导演 关键 词 : 流浪 情欲 寻根 吴彦祖 做 客 谈 婚事 
<ahref="#" class="more"> 详 细 &rsaquo;</a> 
</p> 
</div> 
</div> 


搭建 ”更 多 要 闻 ”部 分 的 DIV ea 


世博 开幕 宋祖英 周杰伦 跨 界 献艺 
更 多 要 闻 部 分 是 纯粹 的 文字 显示 ， 样 式 效果 如 图 27-7 5 
所 示 ， 它 使 用 了 ”抬头 + 正文 ”的 样式 ， 而 针对 每 篇 文 R 训 aa aa 
章 ， 是 用 “标题 + 文章 ”的 形式 Ry 
- 面 给 出 这 个 DIV 的 关键 实现 代码 ， 代 码 主要 采 月 = 志 
了 ul 和 1i 的 分 段 方式 ， 由 于 代码 比较 简单 ， 所 以 就 不 再 详 RE 
细 说 明了 。 让 兰 基站 律师 称 引 下 理由 不 充分 
要 1 隐 小 
高 清 : 《七 仙女 》 新 剧 昭 喔 光 
[i 新 副 巾 旧 区 入 
查看 更 多 
图 27-7 ”更 多 要 闻 ”部 分 的 效果 
1. <div class="other-events "> 
2. ”<h2> 更 多 要 闻 </h2> 
3 </diw> 
4. <ulclass="other-events-content"> 
3 <1i> 
Be <! 标题 加 文字 部 分 的 文章 - -> 
Ts <h3><a href="#"> 世 博 开幕 宋祖英 周杰伦 跨 界 献艺 </a></h3> 
8. <p> 由 东方 卫视 倾情 打造 和 播 出 的 《世界 ， 你 好 ! 》 世 博 开幕 电视 三 天 大 直 </p> 
3 过 /is 
10. ”省 略 其 他 新 闻 
11. <xals 
12. <div align="center "><ahref="#"> 查 看 更 多 </a></div> 


搭建 ”更 多 图 片 新 闻 “部 分 的 DIV 


在 更 多 图 片 新 闻 部 分 中 ， 图 片 是 主体 ， 除 了 新 闻 标 题 外 ， 还 有 读者 对 此 新 闻 的 评分 信 
息 ， 效 果 如 图 27-8 所 示 。 
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解 客 《 阿 凡 达 》 如何 打破 电影 发 行军 规 


雪 者 计 去 P00 投 忆 | 3 
GOVOY 


参加 二 生 “查看 全 部 评选 


出 


27-8 ”更 多 图 片 新 闻 ”部 分 的 DIV 效果 图 


这 部 分 的 关键 实现 代码 如 下 所 示 ， 代 码 通 过 一 个 新 闻 来 举例 ， 其 中 ， 第 10 行 定义 了 图 片 
部 分 ， 第 21 行 定义 了 新 闻 标 题 。 


1. <div class="other-pPhotos "> 

2. ”<h2> 更 多 图 片 新 闻 </h2> 

3 -</div> 

4. <divclass="other-photos-content"> 

Se ils 

6. <1i> 

Ee <div class="left-column"> 

本 <div class="frame"></div> 

BE <div class= "middle "> 

10 . <ahref="#"><img src=" img/walkway-in-winter .jpg" width="90" /></a> 

ls </div> 

De <div class="frame bottom"></div> 

L335 </div> 

14. <div class="right-column"> 

ha <div> 

16. <span class=" text "> 读者 评选 (130 投 票 )</span> | <span class="score">3.5 分 

LE </span> 

18 . </div> 

19 . <div class="rater"> <span class="xrater x35"><img src=" img/spacer .gif" 
width="74" height="14" /></span> </div> 

e205 </div> 

2 <h3 class="clear"> <a href="#"> 解 密 《 阿 凡 达 》 如 何 打破 电影 发 行 常规 </a> </h3> 

2 li 

23. <1i> 

24 .省 略 第 二 条 新 闻 内 容 

25. </Xdiv> 

26. </div> 


这 部 分 位 于 页 面 主 体 部 分 的 第 二 列 ， 其 外 框 与 ”娱乐 要 闻 ”和 ”更 多 要 闻 ”两 个 部 分 是 
一 样 的 ， 所 以 这 里 就 不 再 详细 分 析 了 。 这 里 要 注意 的 是 从 第 7 行 开 始 ， 我 们 使 用 了 table 这 个 标 
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黎 


立 


9 


这 是 一 个 经 典 的 DIV 其 套 table， 因 为 在 某 些 时 候 ，DIV+CSS 的 方式 并 
DIV 蔷 套 table 来 实现 。 


的 效果 ， 这 个 时 候 就 可 以 使 


搭建 页 脚 部 分 的 DIV 


首页 页 脚 半 


这 部 分 关键 的 


分 包含 了 导航 菜单 


娱乐 网 


第 27 章 ”星光 灿烂 的 娱乐 资讯 网 站 


和 ”版 权 说 明 ”两 大 块 ， 


其 效果 如 


图 27-9 所 示 。 


实现 代码 如 下 所 示 ， 其 中 


义 了 下 方 的 Logo 图 标 和 版 权 声明 。 


肢 


A| 


1 
2 
3 
4 
5 
6 
7 
8 
9 


<div id="cFooter "> 


<div class= "line-two "> 
<div class= "col "> 


<h3> 关 于 我 们 </h3> 


<ul> 
; <1li><a href=" 
<1li><a href=" 
<li><ahref=" 
3: <li><ahref=" 
<li><ahref=" 
<1i><ahref=” 
</ul> 
</div> 


# 
# 
# 
# 
# 
# 


"> 关于 我 们 </a></1i> 
"> 关于 网 站 </a></1i> 
"> 关于 公司 </a></1i> 
"> 网 站 地 图 </a></1i> 
"> 网 站 帮助 </a></1i> 
"> 联系 我 们 </a></1i> 


<! 放置 1ogo 和 版 权 声 明 - -> 
<div class="line-three"> 娱乐 资讯 网 &copy; 2009 - 2010 保留 一 切 权 利 </div> 


0 
1 

2 

3 

4. 省 略 其 他 新 闻 
5 

6 

了 全 


</div> 


#cFooter { 


width:800px; /* 定 义 宽度 */ 
padding:5px 0; /* 定 义 内 边 距 */ 
font-size:10px; /* 定 义 字 体 大 小 */ 
color :#666; /* 定 义 颜色 */ 


图 27-9 页 脚 部 分 的 DIV 


在 上 面 代码 的 第 1 行 里 ， 我 们 定义 了 ID 为 cFooter 的 CSS， 具 体 代 码 如 下 所 示 ， 
分 的 宽度 、 内 边 距 、 字 体 大 小 和 颜色 。 


hh， 从 第 4~13 行 定义 了 诸多 导航 菜单 ， 而 第 16 行 定 


它 定义 了 页 


351 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 


《ZE 首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 
描述 首页 中 其 他 CSS 的 效果 ， 如 表 27-2 所 示 。 


表 27-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<a href="#" class="more"> 定义 字体 为 斜体 
.more { 


text-decoration:none; 
color:#357595; 
font-style:italic; 
; 
<a id="logo" 定义 字体 灰 显 效果 


#left.cms { 


padding-left: 4px; 
background: url(../img/ 
top_corner_left.gif) no-repeat; 
<div class="pic"> 定义 图 片 相框 的 阴影 效果 
.pic img { 
margin:2px 0; 
border: 1px solid #555; 


27:3 ”明星 图 片 页 面 


月 星 图 片 页 面 使 用 了 三 列 设计 ， 内 容 包 含 明 星 图 片 和 明星 介绍 等 信息 。 


卸 展 削 疾 ”明星 图 片 页 面 左 边 日 历 部 分 的 DIV 


历 部 分 使 用 了 ul 和 1 设计 ， 红 色 框 标 出 三 部 分 内 容 ， 这 里 我 
们 给 出 部 分 主要 的 DIV 效果 ， 其 他 的 DIV 暂 不 做 介绍 ， 如 图 27-10 
所 示 。 
这 里 我 们 可 以 看 到 列表 中 包含 图 片 、span 标 签 描述 文字 和 标题 
锚 点 ， 而 搜索 区 域 的 GO 和 SHOW 基本 上 用 图 片 代替 ， 通 常 在 设计 
中 会 使 用 背景 图 去 替代 搜索 栏 原来 方 方 正 正 的 文本 框 和 按钮 ， 相 应 一 
代码 如 下 所 示 。 图 27-10 日 历 标签 效果 
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1. <h3 class="title"> 日 历 </h3> 
2 <div id="sub2"> 
3 <div class="content"> 


4. <div class="nav'"> <a id="calPrevMionth" href="#" 
class="arrow">&laquo;</a> 

与 <a id="calCurrentMonth" href="#">2010 四 月 </a> 

他 5 <a rel="nofollow" id="calNextMonth" href="#" class="arrow">&raquo;</ 
a> 

7 </div> 

2 <div class="calendar"> 

9. <div id="calWrapper" style="left: 0;"> 

1 <div id= "calMonth "> 

nls <ul> 

Da <li><a rel="nofollow" href="#" class="blurred" >28</a></1i> 

13. PA ddd, ed 

14. </ul> 

se <ul> 

16. <li><a rel="nofollow" href="#" title="11">11</a></1i> 

全 Pes yd et 

18. </ul> 

19: <ul> 

20: 2 dk 

21: <li><a rel="nofollow" href="#" class="today" title="29">29</a></ 
li> 

2 <ul> 

3 <1li><a rel="nofollow" href="#" class="blurred"title="02">2</a></ 
li> 

24. Pid tie he 

25: </ul> 

26 . </div> 

Bs </div> 

28 . </div> 

29 . <div class="clear "></div></div> 

30. <div class="bottom"> 

3 <div class="left"></div> 

2 <div class="right"></div> 

33- </div> 

Bd /div> 


日 期 控件 功能 是 用 JavaScript 实 现 的 ， 这 里 不 做 介绍 ， 我 们 把 注意 力 放 在 样式 代码 上 ， 


每 


个 日 期 选择 项 是 由 一 组 ul 和 li 组 成 的 ， 并 且 所 选择 的 日 期 可 以 有 三 种 颜色 ,分 别 是 历史 


日 期 颜色 、 未 来 日 期 颜色 和 当天 日 期 颜色 ，1i 内 部 的 颜色 都 包含 在 li 标签 内 ， 下 面 是 日 期 的 
样式 代码 。 


1. #sub2ul, #sub2ul li {margin: 0; padding:0 ;list-style-type: none; } 
2. #sub2 .content { 

3. width: 145px:; 

4. font-size: llpx; 

1 color : #343F14:; 

6 padding-left: lpx:; 
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i background: #CDDBA6 ; 

8 . border-right: 5px sol id #8F9974:; 

9. overflow: hidden; 

10: Zoom: 1; 

1 

12. #sub2 .content a{ color: #343F14: text-decoration: none; } 


13. #sub2 .content .calendar {margin:S5px 0; width:145px:;o verflow:hidden;positi 
on:relative; } 

14. #sub2 .content .calendarul { clear: left; width: 140px; margin: 0 
auto; } 

15. #sub2 .content .calendar ul 1i{ 

16. float: left; width: 18px; height: 18px; overflow: hidden; text-align: 
center; 

17. font-size:11px;line-height:18px;background: #EFFDC8;color: #666;margin: 
1px 2px lpx 0; 


1 

19. #sub2 .content .calendar ul a{ 

20: display: block; background: #fff url( ../img/ltgreen.left.round- 
collsBlf  ): Color: 3343: 

Zh height: 18px; width: 18px; 

2 

23. #sub2 .content .calendar ul a:hover { 

24. background-color : #6BAF20; 

Es COlor: #£f£: 

26 . text-decoration: none ; 

2 


28. #sub2 .content .calendar .clear { clear: left; height: 5px; font-size: 0; 
29. line-height: 5px; } 
#sub2 .content .calendar ul li .today { 
background-color : #6BAF20; color: #fff; font-weight: bold;} 
#sub2 .content .calendar ul li .blurred { background-color: #DFEDB8; color: 
#999;} 
#sub2 .content .calendar ul li .blurred:hover { backeground Eee 
#6BAF20; color: #fff; } 
#sub2 .content .calendar #calMonth{ width: 145px; float: left;} 
#sub2 .content .calendar #calWrapper { 
width: 145px; position: relative; top:0; 1left:0; 
} 
#sub2 .content .nav { 
font-weight: bold; text-align: center; line-height: 1l6px; margin-top: 


Spx: 小 
30. #sub2 .content .nav .arrow{ 
31. font-size: 14px; 
22 line-height: 14px:; 
33: margin: O5px: 
34 . padding-bottom: 2px; 
35. } 


在 上 面 HTML 代 码 中 使 用 了 多 个 DIV 嵌 套 来 搭建 日 期 区 域 的 控件 。DIV 使 用 了 从 父 类 的 
sub2 到 calmonth 的 样式 一 级 一 级 地 实现 了 统一 到 内 部 的 细 化 样式 。 这 里 我 们 只 简单 说 明 它 的 
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设计 思路 ， 代 码 不 做 介绍 。ID 为 sub2 和 content 的 最 外 层 DIV 实 现 无 ul 和 上 ii 的 样式 、 无 边 距 的 定 
义 、 到 内 部 逐步 定位 颜色 以 及 四 边 的 位 置 。 


流民 逐 帮 ”明星 图 片 页 面 中 间 部 分 的 DIV 
明星 图 片 页 面 中 间 部 分 包括 相关 明星 图 片 和 相关 信息 描述 部 分 ， 其 效果 如 图 27-11 所 示 。 


一 一 
本 期 明星 介绍 Lad 证 |] 


博客 。 近 映 等 自 旨 三 亚 私房 明 ( 图 ) 张 于 也 分 享 护肤 心神 
公益 。 车 虹 合 台 豆 唱 为 蓝 善 (图 ) 陈 建 州 继续 赤 公 益 7 地 
时 尚 。 众 子 尖 低 移 吉 搂 招 秀 身段 黄 奖 昱 局 礼 概 显 知性 半 


图 27-11 杂志 内 容 介绍 效果 图 
实现 此 部 分 的 HTML 代 码 如 下 所 示 。 


1. <div id="photosContainer "> 

2 <div class="no-overflow"> 

3 <h1> 本 期 明星 介绍 -- Lady Gaga </h1> 

4 <img src=" img/010.jpg" width="184" height="128" class=" imgLeft" /> 
二 <div> Lady GaGa1986 年 出 生 于 纽约 的 Yonkers "</div> 

6 <div class="clear links" style="font-size:12px"> 

jh <ul class="roundButtons" style="width: 350px; margin-top: 7px;"> 
8. <li><a href="#" style="font-size:12px"> 专 辑 </a></1i> 

9. /**// 略 *****/ 


10 . </ul> 

Lbs </div> 

1 <div class="clearer "></div> 

TS <div class="separator"></div> <h1> 娱 乐风 向 标 </h1> 

1 活 <div><p><span style="font-size:14px; font-weight :bold"> 重 磅 : </ 
span><a href="#"> 李 连 杰 登 顶 微 博 人 气 王 </a> <a href="#"> 快 乐 大 本 营 携 家 族 齐 落户 </a></p> 

15. /**// 略 *****/ 

16x </div> 

1 <div class="links"> 
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18 . <div class="clearer "></div> 

19 . </div> 

20 <div class="separator "></div> 

21. <h2>《 时 代 》 影 响 力 百人 榜 韩 寒 排 第 二 超 奥巴马 </h2> 

2 <div> 当 事 人 : [韩寒 回应 入 围 :这 事 与 我 无 关 ] [入 围 百 大 人 物 / </div> 

3 /**// 略 *****/ 

24. <div class="separator "></div> 

25: </div> 

26° <div class="topContainer "> <hl> 明 星 公 益 </h1> 

全 <div class="topPhotos "> 

2 <ul><1i> 

29. <divclass="pic"> 

30. <a href="#"><img src="img/003.jpg" width="120" 
height="120" /></a> 

| </div> 

2 <p><ahref="#"> 赈 灾 晚 会 众 明星 捐款 </a></p> 

33: </1i> 

34. Pd sh 

358 </ul> 

36.: 人 

3 </div>> 


从 上 面 代码 看 到 ， 中 间 DIV 区 域 是 由 不 同 的 内 容 区 域 组 成 的 ， 依 次 从 上 至 下 的 DIV 划 
分 不 同 内 容 ， 这 里 只 介绍 明星 图 片 介绍 和 第 二 个 娱乐 风向 标 两 个 区 域 ， 使 用 的 样式 代码 如 


下 所 示 。 

1. .#photosContainer {margin-top:14px; } 

2. .mainul.roundButtons { 

3 margin:0 auto; 

4. padding:0; 

5 list-style-type:none; 

6. overflow:hidden; 

Tol 

8. .mainul.roundButtons 1i{ 

9. background:url(../img/green.door .left.gif) no-repeat left top; 

10% float: left; 

Ws padding:0; 

125 line-height :15px; 

Los font-size:8px; 

14. margin:0 lpx; 

155 white-space:nowrap; 

i165 

17. .mainul.roundButtons lia, .mainul.roundButtons lia:hover { 

Ts background:url(../img/green.door .right.gif) no-repeat right top 
Limportant ; 

19: display:block; 

20. color:#fff !important ; 

2 padding :3px 6px:; 

2 text-decorat ion:none; 

2 text-transform:uppercase; 

24. font-size:8px; 
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5 

26. #photosContainer .separator { 

2 background:url(../img/dotted-line.gif) repeat-x; 
28. height:1px:; 

29. line-height :1px:; 

30. font-size:0; 

31: overflow:hidden: 

32. width:400Px ; 

3 margin:S5px 0; 

34,7 

35. #photosContainer .topContainer .topPhotos .pic{ 
36: border-bottom:2px solid #fff; 

37: position:relative; 

38、 font-size:0; 

39.} 


40 ，/** 六 玉米 米 / /区 站 六 六 玉环/ 


上 述 样 式 代码 中 ， 列 出 主要 的 CSS 代 码 ， 其 他 内 容 请 从 与 本 书 配套 的 下 载 资源 
关 源 代码 。 


h 找 到 相 
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杂志 由 于 主题 明确 、 内 容 丰 富 ， 所 以 是 一 种 比较 好 的 传媒 手段 ， 而 一 些 
热门 的 杂志 更 能 引领 一 个 领域 的 潮流 。 

本 章 将 介绍 一 个 杂志 综合 资讯 网 站 ， 这 类 网 站 由 于 对 杂志 资讯 进行 了 
整理 分 类 ， 所 以 包含 的 信息 量 比较 大 ， 分 类 也 比较 明确 ， 也 能 吸引 一 定 的 流 
量 。 


28.1 ”网 站 页 面 效 果 分 析 


在 本 章 中 ， 将 着 重 分 析 杂 志 网 站 的 首页 和 ”杂志 介绍 页 面 的 设计 样式 ,而 ”杂志 推 
荐 页 面 风 格 比 较 简 单 ， 所 以 就 不 再 的 分 析 了 。 


《EBD 首页 效果 分 析 


杂志 网 站 的 首页 布局 采用 了 两 行 的 样式 ， 其 中 ， 第 一 行 里 放置 网 站 Logo、 网 站 导航 、 
站 内 搜索 、 杂 志 广 告 等 几 个 部 分 内 容 。 第 二 行 里 放置 ”推荐 杂志 、 杂志 列表 、 地 址 
、 ”快速 导航 ”四 个 部 分 。 
于 首页 的 篇 幅 较 长 ， 所 以 我 们 通过 两 个 图 来 展示 首页 的 整体 样式 。 图 28-1 展 示 了 第 一 
行 的 效果 。 图 28-2 展 示 了 第 二 行 的 效果 。 


流 古 | 时 岗 | 四 于 全 直 


图 28-1 首页 第 一 行 的 效果 


网 
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(时 册 要 启 》《 男 上 ) 


上 涤 市 大 马路 123 号 


194 
时 册 家 压 


na0t0 


rz > ">= 
gett mm 


网 


28-2 首页 第 二 行 的 效果 图 
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器 


分 类 和 此 分 类 下 杂志 的 介绍 ， 


2 区 有 ”杂志 介绍 页 面 的 效果 分 析 
在 杂志 介绍 页 面 中 ， 放 置 了 杂志 的 
各 个 杂志 。 
这 个 页 面 也 采用 了 两 行 样式 ， 


所 示 。 


网 站 


杂志 提供 在 贱 订 阅 ,为 您 带 采 最 新 的 杂志 信息 


宗 述 


这 个 页 面 
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片 、CSS 文 件 和 JS 代码 ， 


告 ， 而 第 二 行 包括 杂志 分 类 导航 和 杂志 介 


绍 ， 下 再 


= 


我 们 就 只 给 


在 牌 尔 本 慢 慢 快活 


《 福 拉 拉 》 升 值 记 广告 植 入 的 春天 来 了 


| 


28-3 杂志 介绍 页 面 的 效果 


的 文件 部 分 是 比较 传统 的 ， 


[网 


这 个 页 


站 


出 第 二 行 的 效果 图 


Ph， 第 一 行 的 样式 与 首页 完全 一 致 ， 都 包括 导航 和 广 


， 如 图 28-3 


img、css 和 js 三 个 


录 分 别 保存 网 站 所 


文件 及 


其 功能 如 表 28-1 所 示 。 


到 的 


网 


表 28-1 杂志 网 站 文件 和 目录 一 览 表 

模块 名 文件 名 功能 描述 
页 面 文件 index.html 首页 

interviews.html 杂志 介绍 页 面 

magazine.html 推荐 杂志 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


28.2 ”规划 首页 的 布局 


为 需要 引领 时 尚 的 杂志 网 站 ， 所 以 网 站 的 首页 就 比较 重要 了 ， 本 节 我 们 依次 讲述 首页 
要 部 分 的 设计 方式 。 


[he 


首页 页 头 的 DIV 


页 页 头 部 分 是 比较 重要 的 部 分 ， 它 包括 网 站 Logo 部 分 、 网 站 的 导航 部 分 、 站 内 搜索 部 
分 和 杂志 广告 部 分 ， 这 部 分 的 效果 如 


28-4 所 示 。 


图 28-4 首页 页 头 设计 分 析 图 


页 头 的 关键 实现 代码 如 下 所 示 。 


1. <divclass= "top "> 


<div class="top-left"> <a id="ct100_Headerl_linkLogo” class="1logo" 
href="index.html"> 首 页 </a> </div> 
3 </div> 
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4. <div class="menu-cover "> 

请 <div class= "menu-area"> 

6 <ul id="navigation"> 

『 攻 <li id="navigation-1"><a id="ct100_Header1l_linkMagazine" 
href=" index.html"></a></1i> 

8. 

昌 </ul> 

10. <div class="clearfix"></div> 

Lis <input type="text" class="search" /> 

1 2 <input type="submit" value="" class="search-go" /> 

13: <div class="clearfix"></div> 

14. <div class="clearfix"></div> 

LS <a id="ct100_Header1_l]inkDownload" class="download">download</a> </ 
div> 


TGSs <div class="cover "> <a href="#"><img src=" img/79292fef-14da-4bf0-ac58- 
ba4a05ece525 .jpg"” style="border-width:Opx;" /></a> ..</div> 

17: “</div> 

18. <divclass="clearfix"></div> 

19. <divclass="middle-line"> 


20. <divclass="middle-dummy"></div> 

2 <div class="middle-line-left"> 

人 <select class="select-issue2"> 

3 <optionvalue="15" selected="selected">-- 近 1 周 ------ </option> 

24. 

25: </select> 

26. <ul class="issue-download"> 

<liclass="pc"><a id="pc-down1load"”> 流 行 </a></1i> 

28. 

29. </ul> 

305 </div> 

3 <divclass="middle-line-right"> 

2 <div> 

3 <h5 class="pink-announce">《 春 晓 》 每 一 位 学 生 都 值得 赞美 </h5> 

34. 

35: </div> 

36; <ul class="cover-selector"> 

37. <li class="nol"><a class="active" href="JavaScript:void(0):;" 
titles" >le/a>e/lix 

38. 

39. </ul> 

40. </div> 


上 面 代码 中 ， 第 1~3 行 定义 了 Logo 所 在 的 位 置 ， 第 4~12 行 定义 了 网 站 的 导航 部 分 和 搜索 
部 分 ， 第 16 行 和 第 17 行 定义 了 杂志 广告 部 分 ， 第 21~30 行 定义 了 网 站 的 导航 搜索 部 分 ， 而 第 
31~40 行 则 定义 了 杂志 广告 部 分 。 

在 上 面 代码 中 ， 要 注意 导航 部 分 的 代码 ， 它 使 用 一 张 有 全 部 导航 的 图 片 作为 背景 图 片 ， 
并 与 导航 链接 配合 ， 形 成 导航 部 分 ， 它 的 实现 方法 是 使 用 多 个 CSS 一 起 衔接 而 成 的 ， 代 码 如 
下 所 示 。 
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1. ul#navigation liaf{ 

2 background: url(../img/menu.gif) no-repeat 00:; 

3 

4. ul#navigation li#navigation-2a{ 

六 background-position: 0 -25px; 

Sp 

7. ul#navigation li#navigation-2 a:active, ul#navigation li#navigation-2 
a:hover { 

8: background-position: -60px -25px; 

9 


在 上 述 代码 中 ， 第 2 行 引用 了 那 张 包 含 全 部 导航 的 图 片 ， 而 第 4~6 行 、 第 7~9 行 则 是 配合 
这 张 图 片 使 用 的 超 链 。 这 里 要 注意 的 就 是 第 5 行 和 第 8 行 的 属性 ， 就 是 由 于 这 个 属性 赋值 的 不 
同 ， 才 会 形成 图 片 和 链接 配合 的 导航 部 分 。 


搭建 ”杂志 推荐 ”部 分 的 DIV 


杂志 推荐 部 分 位 于 第 二 行 的 左边 部 分 ， 这 部 分 主要 用 于 显示 网 站 推荐 的 杂志 ， 这 部 分 的 
效果 如 图 28-5 所 示 。 


| 


一 本 以 种 要 、 环 于 为 主题 元 系 的 时 尚 生 藻 杂 老 一 李兵 [ 解 
中 国内 地 钟表 珠宝 消费 市 场 的 行业 性 杂志 。 2010-5 月 刊 


2010-05-01 


二 本 则 透 和 人数 大 中 国 钙 要 奈 皇 币 地 问 秒 上 洗 的 好 志 。 一 
本 被 读者 推 案 为 时 尚 集团 景 具 收 藏 价值 的 杂志 


2010-4-23 点 击 :343 | 网 读 


图 28-5 杂志 推荐 部 分 的 DIV 效果 图 
这 部 分 的 关键 实现 代码 如 下 所 示 。 


1. <divclass= middle-big-left "> 

和 <h4 class="blog "> 时尚 杂 志 推 荐 </h4> 

3 <aclass="submit-entry" href="#"></a> 

4. <div class='blog-entries'> 

5 <a class="name" href="#" target="_blank"> 时 尚 时 间 </a> 
Bs <a class="url" rel="no-follow" href="#" target="_blank"> 一 本 阅读 人 数 随 中 
表 珠宝 市 场 同 步 上 涨 的 杂志 </a> 

i 


<a class="thumb" rel="no-follow" href="#" target= 


钟 


_blank"><img 
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src="img/blog/d90328c2-e98b-4aec-8ce5-2de907b5fe62.jpg"” style="border- 
width:Opx;" /></a> 


8. <P> 一 本 以 钟表 、 珠 宝 为 <strong>2010-5 月 刊 </strong></p> 

9. <span class="date">2010-05-01</span> 

10x <aclass="blog-share" href= "#"> 阅 读 </a> 

Ls <span class="hit"> 点 击 : 313&nbsp; | &nbsp;</span> 

es <div class="clearfix"></div> 

3 </div> 

14. 

1 <divclass="middle-left-end"> 

V6: <div> 

Ts <input type=" text" value=" 请 输入 " class="subscribe" /> 

18. <a class="sub" href="#" style="font-weight :bold; "> 搜索 </a> <span 
class="unsub">|</span> <a class="unsub" href="#"> 订 阅 电 子 杂 志 </a> </div> 

19. <span class="message"></span> </div> 

20. <divclass="outer-end"> 

2 <span class="yellow-text "> 我 想 找 </span><span class="blue-text"> 最 新 的 
时 尚 杂 志 ， 最 火 的 杂志 </span> 

2 <input type="text" class="ithink" /> 

3 <input type="submit" value="" class="ithink-button" /> 

24. </div> 

25. </div> 


导 本 杂志 的 搭建 方法 是 一 样 的 ， 为 了 节省 篇 幅 这 里 只 给 出 一 个 作为 示范 ， 其 余 的 就 不 给 
出 了 ， 在 上 述 代 码 中 每 本 杂志 都 是 以 图 片 结合 文字 的 方式 显示 出 来 。 

在 上 述 代码 中 ， 第 15-~24 行 搭建 的 是 杂志 搜索 部 分 ， 这 部 分 搜索 分 为 两 个 ， 一 个 是 只 能 
搜 到 可 以 订阅 的 杂志 ， 还 有 一 个 是 能 搜 到 当前 最 热门 的 杂志 。 


引 素 奚 和 搭建 ”杂志 列表 ”部 分 的 DIV 
杂志 列表 部 分 是 正文 部 分 的 上 面部 分 ， 它 包含 本 网 站 所 有 的 杂志 ， 效 果 如 图 28-6 所 示 。 


Ey 


四 


28-6 杂志 列表 部 分 DIV 的 效果 图 


第 28 章 ”杂志 网 站 


这 部 分 的 实现 代码 如 下 所 示 。 


1. <divclass="middle-big-right-1"> 

<script type=" text/JavaScript" src="js/bakatme.js" ></script> 
3 <h3 class="bakatme "></h3> 

4. <a class="addyoursite" href="#"> 注 册 </a> 

<div class="middle-right-sort"> 

6 <select class="sort-site"> 

rs <option selected="selected" value="0"> 所 有 杂志 </opt ion> 

8 

9 


; </select> 

10. <span class="sort"> 类 别 <a class="right-yellowl" href="#"> 女 性 </a>|<a 
class="right-yellowl" href="#"> 男 士 </a>|<a class="right-yellowl1" href="#"> 潮 流 </ 
a> </span> </div> 

Eis <divclass="middle-right-content"> 

Lo. <ul class="bakatme"> 

ER <li><arel="no-follow" href="#" target="_blank"><img 
class="website-images" src="img/82bebe25-bfc6-46c3-b038-c2979cb6d5ba.jpg” 
style="border-width:4px;border-style:solid;" /></a> <img class="flag" src="img/ 
flags/gb.gif" style="border-width:Opx;" /><aclass="name" rel="no-follow" href="#" 
target="_blank"> 时 尚 家 居 </a> <span class="rating-point"></span> 


4. <span class="hit-counts">17</span> <span class="hit-count "> 点 击 </ 
span> </1i> 

Se 

;六 <div> <a class="previous-right"” href="#"> 当 前 显示 12 本 </a> <span 
class="previous-right">|</span> <a class="previous-right" href="#"> 所 有 杂志 </a> 
</div> 

Ve 


在 上 述 代 码 中 ， 只 给 出 一 本 杂志 的 实现 方式 ， 其 他 所 有 杂志 的 搭建 都 是 一 样 的 ， 所 以 这 
里 就 不 再 给 出 其 他 代码 ， 避 免 做 重复 的 说 明了 ， 如 有 需要 可 以 直接 从 与 本 书 配套 的 下 载 资源 
获取 。 


区 水 玉 疾 搭建 ”填写 表单 ”部 分 的 DIV 
填写 表单 部 分 位 于 正文 右边 部 分 的 


请 输入 你 的 个 人 信息 


1 


于 


由 


中 间 部 分 ， 这 部 分 的 作用 是 当 访客 订阅 杂 
志 时 ， 填 写 个 人 信息 ， 这 部 分 的 效果 如 轿 
28-7 所 示 。 
下 面 给 出 这 个 DIV 的 关键 实现 代码 。 ss 


上 海 市 大 马路 123 号 


提交 


坝 | 


28-7 填写 表单 部 分 的 效果 
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1. <div class="middle-big-right-2"> 

2 <div class="work-submit" id="submityourwork"> 

3 <h4> 请 输入 你 的 个 人 信息 </h4> 

4. <div class="submit-1"> <span class="yellow-text2"> 订 阅 数 &nbsp; </ 


span> <span class="submit-no">1</span> <span class="yellow-text2"> | 名 称 :&nbsp; </ 
span><span class="submit-no"> 时 尚 都 市 </span> 

全 <div class="clearfix"></div> 

6 . <span class= "form-text"><strong> 姓 名 :</strong></span> 

<input type= "text”class="submit-form” /> 

8: <span class="yellow-text2">*</span> <span class="form- 
text "><strong> 邮 箱 地 址 : </strong></span> 

9. <input type="text" class="submit-form" /> 
0 . <span class="yellow-text2">*</span> <span class= "form- 
><strong> 家 庭 地 址 :</st rong></span> 
Ls <input type="text" class="submit-form" /> 
3 <span class="select-files"><strong> 订 阅 杂 志 名 :</strong></span> 
二 <div class="browse-box "> 
4 <input type= "fle”class=” 
Ss <input type= "fle”class= 
从 > <input type= "fle”class= 
这 
8 
9 


text 


ileupload" /> 
ileupload" /> 
fileupload" /> 


</div> 
</div> 
<div class="guide"> <span class="yellow-text3"> 信 息 核对 </span><br /> 
20. <span class=""> 杂 志 名 :</span> <span class="guide-info"> 时 尚 都 市 </ 
span> <span class="grey2" > 数量:</span> <span class="guide-info">1 本 </span> <span 
class="grey2"> 收 件 地 址 :</span> <span class="guide-info"> 上 海 市 大 马路 123 号 </span> 
<span class="grey2"> 到 货 日 期 :</span> <span>2010-5-3</span> </div> 


a </div> 

2 <divclass="pink-submit"> 

3 <input type="submit" class="work-submit-button" /> 
24. </div> 

25. <div class="dummy-black"></div> 

26 . </div> 

27. </div> 


在 上 面 代码 中 ， 主 要 分 为 两 个 部 分 ， 信 息 填写 和 信息 核对 ， 第 2~18 行 实现 信息 填写 ， 第 
19~26 行 实现 信息 核对 。 


搭建 ”快速 导航 ”部 分 的 DIV 


速 导航 部 分 位 于 正文 右边 部 分 最 后 一 部 分 ， 
网 站 常用 的 导航 方式 ， 其 效果 如 图 28-8 所 示 。 
快速 导航 部 分 的 关键 实现 代码 如 下 所 示 。 


<div class="foot"> 快速 导航 


<ul> 
<1i> 快 速 导 航 </1i> 
<1i><ahref="#"> 首 页 </a></1i> 
<1i><ahref="#"> 时 尚 杂 志 </a></1i> 


ONODND- 


四 


28-8 快速 导航 部 分 的 DIV 效果 


四 


366 


一 第 28 章 “杂志 网 站 


Y 训 </ul> 
8. </div> 


葬 了 本 ”首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 用 表格 的 形式 描述 


首页 中 其 他 CSS 的 效果 ， 如 表 28-2 所 示 。 


表 28-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 


CSS 描 述 和 关键 代码 


<div class="middle-line- 


right"> 


<div class=blog-entries > 


<div class="middle-big- 
right-1 "> 


定义 宽度 高 度 悬 浮 方式 和 背 

.middle-line-right{ 
width:502px; 

height:71px; 

float:left; 

background-repeat:repeat-x; 

省 略 其 他 代码 

} 


定义 宽度 悬浮 方式 和 内 边 距 
.blog-entries{ 
float:left; 
width:305px; 
padding:10px 0 0 0; 


定义 针对 h3 的 的 字体 样式 、 


式 ， 宽 度 高 度 和 外 边 距 
.middle-big-right-1 h3{ 
text-indent:-9999px; 

float:left; 
width:94px; 
height:18px; 
margin:2px 0 0 0; 

} 


效果 
图 片 
定义 宽度 高 度 ”到 
"| 和 背景 图 片 
《春晓 》 每 一 位 学 生 都 值得 赞美 
下 
2010-5 月 刊 
悬浮 方 


<div class="clearfix"></ 


div> 


清除 在 前 文 里 定义 的 样式 
.Clearfix{ 
clear:both; 
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28.3 ”杂志 介绍 页 面 


杂志 介绍 页 面包 含 各 类 杂志 网 站 的 分 类 列表 和 杂志 内 容 的 介绍 。 
下 条 巴 呈 ”杂志 介绍 页 面 左 边 导 航 部 分 的 DIV 


左边 导航 部 分 使 用 ul 和 1 设计 ， 红 色 框 标 出 三 部 分 内 
一 容 ， 这 里 我 们 只 标 出 搜索 和 分 类 列表 区 域 ， 这 部 分 的 设 
快速 查 接 。 。 | 2008 生 1 月 计 在 之 前 的 案例 中 有 所 介绍 ， 效 果 如 图 28-9 所 示 。 
在 栈 会 员 234 人 这 里 我 们 可 以 看 到 列表 中 包含 图 片 、span 标 签 描 述 
文字 和 标题 锚 点 ， 而 搜索 区 域 的 go 和 show 按 钮 基本 上 
图 片 代替， 我 们 在 设计 中 通常 使 用 背景 图 去 蔡 代 搜索 栏 
原来 方 方 正 正 的 文本 框 和 按钮 ， 相 应 代码 如 下 所 示 。 


图 28-9 分 类 列表 图 
1. <h4 class="interviews "> 快速 搜索 </h4> 
访 ， <div id=" pnlSearch" onkeypress="JavaScript:return WebForm_ 


FireDefaultButton(event,，'ct100_ContentPlaceHolderl_btnInterviewSearch ') "> 
<span class="form-addsite3"><strong> 搜 索 :</strong></span> 


全 <div class="input-container "> 

4. <input name=" txtSearch" type="text" id="txtSearch" class="issue- 
search" /> 

SD: </div> 

Bs <input type="submit" name="go" value="" id="go" class="issue-go" /> 

全 </div> 

8. <span class="form-addsite"><strong> 快 速 查找 :</strong></span> 

9. <div class="input-container "> 

10 . <select name="ct100$ContentPlaceHolder1$ddlIssues"” id="ct100_ 
ContentPlaceHolderl_ddllssues" class="issue-select"> 

I <optionvalue="14">2009 年 12 月 </option> <1--// 其 他 option 略 - -> 

2 </select> 

L132 </div> 

14. <a id="ct100_ContentPlaceHolderl_linkShow" class="issue-show"></a> 
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<span class=" interviews- in"> 在 线 会 员 : <strong>234</strong> 


152 人 </span> 
16 . <ul class= "interview-1list"> 
1 <1i> <a id="nav_1" title="" href="#"><img src=" img/beSdf9eb-0a0a- 


49f6-b48a-d72995f81c9e.jpg" style="border-width:O0px;" /></a> <a class="name" 
href="#" style="1ine-height :15px"> 流 行 时 尚 </a><span>###</span> </1i> 

TS <liclass="split-list"></1i> <!---// 虚 线 间 隔 区 域 - -> 

19. <1i> <a id="nav_1" title="" href="#"><img src=" img/0a8ca8bb-9bd2- 
43f4-bfOc-Ob705c600543.jpg" style="border-width:Opx;" /></a> <a class="name" 
href="#" style="1ine-height :15px"> 电 影 杂 志 </a><span>###</span> </1i> 


20. <liclass="split-list"></li> 

eli <!--// 其 他 列表 项 代码 略 . . --> 

pd <1li class="split-list"></1li> 

2 </ul> 

24. <div class="clearfix"></div> 

25., <div class="middle-left-end-2"> 杂 志 提 供 在 线 <a id="ct100_ 
ContentPlaceHolder1l_linkMail" href="#"> 订 阅 </a>， 为 您 带 来 最 新 的 杂志 信息 </div> 

26. </div> 


在 上 面 的 代码 中 ，select 标 签 定义 了 name 为 ctl00_ContentPlaceHolderl_ddlIssues， 可 能 大 
家 觉得 这 个 ID 取 名 太 长 了 ， 这 主要 与 编程 相关 ， 开 发 人 员 使 用 控件 完成 对 某 块 区 域 的 显示 ， 
或 用 一 种 开发 工具 中 的 控件 代替 html 控 件 实现 一 些 功能 ， 这 些 控件 生成 html 源 码 的 时 候 ID 也 
会 随 之 改变 。 遇 到 开发 时 用 到 动态 ID 的 时 候 ， 设 计 师 只 能 使 用 1D 对 class 样 式 进行 设置 。 


.issue-show{float: left.; 
height :14px; 
text-indent : -9999px; // 首 行 缩 进 ， 负 数 表示 不 显示 文字 
border :none; 
display: inline,; 
overflow:hidden; // 文 字 或 图 片 超出 容器 隐藏 
font-size:1px; 
cursor:pointer; /+* 鼠标 焦点 焦点 样式 */} 
ul.interview-list 1i{ 
width:305px; 
float :left; 
list-style:none; /* 去 除 默认 样式 */ 
height :33px; 
background-color :#d6d6d6 ; 
overflow:hidden:; 3 
16. ul.interview-list lia.name{ 


OOTD 人 NVOD- 


四 心思 一 口 . 


Ls list-style:none; 

18. text-decoration:none; /* 无 下 划 线 */ 
19. color :#595959 ; 

20. font-size:12px; 

之 font -weight :bold; /* 行 高 */ 

22 margin:11px Spx 0 15px; 

2 float:left; } 

24. ul .interview-list li span{ 


DD 
中 On 


list-style:none 
text-decoration:none ; 
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2 color:#ffffff; 

2 /** 样 式 略 ***/} 

29 . ul .interview-list li img{ 

3 float :left; 

ek 

上 面 CSS 代 码 中 ， 不 常用 的 一 些 CSS 属 性 已 经 做 了 注释 。 针 对 ul 和 li 给 出 了 相应 的 CSS 样 
式 。 高 度 、 背 景色 、 所 在 位 置 ， 以 及 内 部 子 标签 span、a 等 元 素 相应 的 样式 ， 这 里 不 做 过 多 讲 
解 了 。 


中 天 更 遇 杂志 介绍 页 面 博客 显示 部 分 的 DIV 


杂志 介绍 页 面 中 间 部 分 是 介绍 相关 杂志 的 区 域 ， 
内 容 从 上 至 下 排列 ， 效 果 如 图 28-10 所 示 。 
实现 此 部 分 的 HTML 代 码 如 下 所 示 。 


门 里 门 外 


到 


图 28-10 杂志 内 容 介绍 效果 


1. <divclass="middle-big-right-1"> 
2. ”<h3> 热 门 内 容 推荐 </h3> 
3 <div class="middle-right-content"> 


4. <div class="interview-left"> 

5 <p><span class="question"> 门 里 门 外 </span><br /><br />&nbspi&nbsp; 

6. 有 范 加 尔 撑 腰 ， 合 同 仅 剩 半年 的 布 特 与 拜仁 提前 续 约 癸 然 板 上 和 钉 钉 ， 如 此 一 位 为 人 低调 

. .V// 略 &nbsp';&nbsp;: 

VW <a href="#">[ 查 看 ]</a><br /><br /> 

8. <span class="question">《 杜 拉 拉 》 升 值 记 广告 植 入 的 春天 来 了 </span><br 
/><br /> 

ER 2010 年 的 4 月 ， 一 部 由 畅销 职场 小 说 《 杜 拉 拉 升 职 记 》 改 编 的 同名 电影 引起 了 太 多 话 
题 ， 它 是 杂 家 "徐静蕾 转型”  // 上 略 

LO .<a href="#">[ 查 看 ]</a><br /><br /> 

Mls </p> 

Le </div> 

Ts <div class="interview-right-q"></div> 

14 . </div> 

15. </div> 
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从 上 面 代码 看 出 ， 博 客 显示 部 分 由 标题 列表 项 和 其 他 内 容 组 成 ， 该 区 域 的 父 类 容器 
primary-content 的 CSS 代 码 如 下 所 示 。 


1. .middle-big-right-l1h3.all-issues{ 
下 text-indent :-9999px; 

float: left; 

4. width:94px; 

0 height :18px:; 

6 margin:2px 0 2px 0; 
fa 

8. .middle-big-right-1 h3.press{ 
Ds text-indent:-9999px; 
10: float: left. 

ls width:55px; 

le height :18px; 

! margin:2px 0 2px 0; 

14. } 

15. .middle-big-right-lh3.goodies{ 
16- text-indent : -9999px ; 
Wp float: left. 

18. width:94px; 

19. height :19px; 

20. margin:2px 0 2px 0; 
2 

22. .interview-left{ 

性 交 float :left !important ; 
2 width:290px !important ; 
25 . /* 六 六 六 阔 米 // 略 六 六 六 六 六 了/ 

26> 3 

7 床 

28. .interview-left p{ 

29. padding:00 19px 0; 
305 

31. .question{ 

S25 font-size:8.5pt; 

3 font-family:Tahoma; 
S44 font-weight :bold; 

35 . /* 六 六 六 米 米 // 略 灶 六 六 六 来/ 
0 


上 述 样式 代码 是 一 部 分 ， 其 他 的 样式 由 于 篇 幅 就 省 略 掉 了 ， 需 要 了 解 的 读者 从 与 本 书 配 
套 的 下 载 资 源 的 源 代码 中 直接 查看 。 
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简洁 的 购物 网 站 


从 规划 、 切 图 到 采用 “DIV+CSS” 的 方式 构建 网 站 ， 最 后 用 到 
JavaScript 编 写 脚本 ， 这 个 是 开发 一 个 网 站 的 一 般 流程 。 本 章 将 根据 这 个 流 
程 ， 开 发 一 个 实用 性 很 强 的 购物 网 站 。 

在 这 个 购物 网 站 的 首页 中 ， 使 用 了 三 列 的 布局 方式 ， 而 “商品 展示 ”页 
面 采 用 两 列 式 的 布局 方式 ， 这 种 设计 上 的 变换 我 们 可 以 通过 简单 地 改变 CSS 
样式 代码 来 实现 。 下 面 我 们 一 起 来 感受 这 个 简洁 的 购物 网 站 的 魅力 。 


29.1 ”网 站 页 面 效 果 分 析 


这 个 购物 网 站 中 ， 我 们 需要 开发 首页 、 ”商品 展示 。、 站 点 地 图 和 关于 我 们 等 
页 面 ， 本 章 将 重点 分 析 其 中 比较 复杂 的 首页 和 商品 展示 页 ， 其 他 页 面 大 家 可 以 参看 与 本 书 配 
套 的 下 载 资源 中 的 相关 文件 。 
这 个 网 站 的 风格 是 : 第 一 ， 将 Logo 放 在 醒目 的 位 置 以 突显 购物 网 站 的 标志 ; 第 二 ， 色 彩 
采用 浅 色调 ， 不 会 喧 宾 夺 主 从 而 影响 到 网 站 的 主题 ， 第 三 ， 网 页 足够 长 ， 从 而 能 让 客户 在 一 
个 页 面 中 就 能 看 到 足够 多 的 信息 。 


首页 多 
首页 的 大 致 效果 如 图 29-1 所 示 ， 它 是 一 个 三 行 的 布局 样式 ， 在 第 一 行 里 ， 放 置 了 Logo 图 
片 、 导 航 信息 和 购物 网 站 公告 等 信息 。 在 第 二 行 里 ， 分 别 用 三 列 来 表示 导航 、 户 博 
客 和 产品 展示 部分， 在 第 一 列 的 ”导航 ”部 分 的 下 方 ， 需 要 放置 ”收藏 页 面 “和 


户 注册 登入 ”的 界面 。 而 在 最 后 一 行 里 ， 放 置 购物 网 站 信息 等 内 容 。 
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923 上 由于 + 这 里 有 最 好 的 ， 吕 种 刘 全 的 。 
数 是 要 多 的 商品 供 你 连 
这 里 放置 Logo， 网 站 头等 信息 


自由 买卖 2080 自由 天 卖 ! 


> 


回回 | 


台式 机 第 记 本 


回 


了 刚 买 了 一 言 Ls 祯 唱 电 视 ， 效 
果 比 起 丸 的 不 错 。 了 二 了 刀 
wwwtaobao com 淘宝 网 部 Av[ 和 Mm\ 巾 式 的 动画 电 
影 , 用 uv 全 播放 在 党 清晰 ， 
www51bicom 比 购 网 儿子 满意 . 阿 呵 


Wwwsmarter com .cn 聪明 点 


LG 42Lm<oFc 汗 晶 电视 性 能 
色 ， 功 配 齐 全 ,全 高 清 的 
EN 


收藏 排行 


回 村 节 的 得 上 一 天 天 的 人 5 浊 ， 
收 基 排行 箭 新 一 办 的 家 电价 格 大 战 也 苗 
执 生 发， 商品 的 价格 直肠 冲 
购买 排行 各 击 着 滑 绵 者 的 眼球 ,其 中 万 
为 三 的 一 区 黑马 是 .S 
Eos -2beoro 全 而 汪 汗 电视， 
这 区 电视 可 以 称 之 为 是 一 到 
最 全 能 的 电视 ， 丰 公所 有 全 
而 请 的 分 大 室 ， 而 且 还 皮特 
流 媒体 播放 ,外 加 内 置地 面 
全 号 按 必 六 轩 ,性 内 已 秀 。 


识别 特 神 和 十 


回 sOM.Ex%00 在 尺寸 规格 上 
发 和 有 了 4e、 避 和 22 英寸 的 : 
种 尺寸 ,全 都 具备 13: 
1050 的 全 高 清 分 关于 标准 。 
在 产品 机 备 上 ,sxe05 与 
EXs00 相 比 ， 妈 在 ， pw 
Tooks 丽 倍速 红 动 技术 上 献 
了 狗 三 .区 别 不 大 - 


四 条 尼 xDteovssoo 芒 曲 电视 
耳 营 价格 确实 外 便 直 


网 坪 看 


我 一 个 月 前 买 的 这 款 som 
《索尼 ) 案 尼 roL- 
液晶 上 电视， 用 着 还 搓 好 的 ， 
强烈 推荐 季 


页 面 底部 包含 购 
物 网 站 的 信息 


图 29-1 首页 的 效果 图 


放置 产品 村 示 页 面 信息 
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商品 展示 页 面 的 效果 分 析 


商品 展示 页 
面 大 致 上 也 采用 
了 三 行 的 样式 。 这 
个 页 面 的 页 头 和 页 
脚 与 首页 的 风格 相 
同 ， 而 左边 的 导航 
部 分 也 与 首页 一 
样 ， 所 不 同 的 是 ， 
在 第 二 行 里 ， 需 
要 用 两 个 DIV 包含 

所 有 商品 和 
特别 推荐 商品 
的 信息 。 

商品 展示 页 
面 的 效果 如 图 29-2 
所 示 。 


网 站 导航 


百 页 
数码 产品 
大 衬 家 电 
个 人 家电 


加 | 可 | 日 日 


辐 6 式 机 笔记 本 


Wwwtaobao .com 涪 皇 网 
Www 5iblcom tt 


wwamanercom cn 聪明 点 


收藏 排行 


罩 。 必 可 排行 术 
站 。 购买 排 行 村 
加 会员 排行 画 


用 户 登录 


时 关 T 和 0] 加 十 品 区 示 加 。 网 站 地 图 


区 迎 作 光 念 自 晶 守 圭 ?这 里 有 最 好 的 。 品 种 齐全 的 。 
数量 委 多 的 商品 供 托 广 择 - 


自由 买卖 2084 自由 买卖 ! 


部 sy 和 My 格式 前 动 面 电 
下 
儿子 满 香 。 网 


LG zlyegro 请 晶 电 视 性 能 
出 色 ， 功能 齐全 ,全 耐 清 的 
分 关 率 满足 消费 者 的 日 党 需 
求 


春节 的 各 朱 一 天 天 的 几 济 ， 

新 一 园 的 家 电 俐 格 大 战 也 著 
办 符 发 ,商品 的 便 粘 不 断 站 
击 准 消 费 者 的 取 于 ,其 中 万 
为 各 显 的 一 区 黑马 是 LS 

号 Lesor0 全 高 而 江口 电视 ， 
记 区 视 可 以 称 之 为 有 一夫 
量 休 衣 的 记 视 ,不 忆 扣 有 全 
高 清 的 分 部 率 ， 而 生还 支持 
流失 仁 江 训 ， 外 广内 置地 而 
广 叶 接收 半 置 ， 性 能 优秀 。 


本 中 本 拓 人 十 


回 soweexeeo 在 Rd 规格 上 
Pi 和 和 英和 的 三 
全 


了 首 上 ，Ex<op 二 


在 wesennev 


索尼 roLcovzco 牙 昌 电 视 
党 价格 确实 好 便宜 


我 一 个 月 前 习 隐 这 款 sokv 
【地 尼 ) 需 尼 rt- 
硫 吉 电 搞 ， 用 生还 插 他 的 ， 
ED 


图 29-2 商品 展示 页 


的 效果 图 


第 29 章 “简洁 的 购物 网 站 


购物 网 站 文件 综述 


在 这 个 购物 网 站 里 ， 除 了 首页 和 商品 展示 页 面 外 ， 还 包含 ”站 点 地 图 和 关于 我 们 
页 面 ， 这 些 页 面 中 所 用 到 的 图 片 、CSS 文 件 和 JS 代 码 ， 分 别 放 置 在 images、css 和 和 js 目录 里 ， 
件 及 其 功能 如 表 29-1 所 示 。 


表 29-1 购物 网 站 文件 和 目录 一 览 表 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
商品 展示 页 面 
网 站 地 图 的 页 面 
aboutus.htm 关于 我 们 的 页 面 
css 目 录 本 网 站 的 样式 表 文件 
js 目录 ee 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


29.2 规划 首页 的 布局 


前 一 节 我 们 已 经 介绍 了 首页 和 商品 展示 页 面 两 个 页 面 的 大 致 结构 ， 本 节 我 们 将 在 规划 的 
基础 上 分 析 页 面 中 重要 DIV 的 实现 方式 。 


DIV 


刚才 我 们 已 经 分 析 了 ， 首 页 大 致 上 可 以 分 为 三 行 ， 其 中 ， 第 一 行 是 页 头 ， 其 中 包含 Logo 
图 片 、 导 航 菜单 、 购 物 网 站 介绍 等 信息 ， 页 头 效果 如 图 29-3 所 示 。 


国人 TTT 
和 介绍 信息 的 


图 29-3 首页 页 头 的 DIV 设计 分 析 图 
实现 页 头 部 分 的 代码 如 下 所 示 。 


<! 页 头 ， 用 css 的 方式 引入 蓝 色 长 条 - -> 
<DIV id=header> 
<DIV id=" logo"> </DIV> <! 1ogo 部 分 的 DIV--> 
<DIV id="navigationheader "><! 导航 菜单 部 分 的 DIV- -> 


心 nn 一 
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上 
他 5 


<UL> 


<LI><A id=navinformation href="aboutus .htm"><img src=" image/top_01. 


jpg" border="0" alt="" style="vertical-align:middle; margin-right:20px;”/> 关 于 我 


们 </A> 


省 略 其 他 导航 菜单 
</UL> 
</DIV><! 导航 菜单 部 分 - -> 
<DIV id="introduction"><! 网 站 介绍 部 分 DIV- -> 
<H2> 自 由 买卖 ! </H2> 
<img src=" image/right_01.jpg" border="0" alt="" /> 
<P> 欢 迎 您 光临 <strong> 自 由 买卖 </strong>! 
<em> 这 里 有 最 好 的 ， 品 种 齐全 的 ， 数 量 繁多 的 商品 供 您 选择 。</em> 
</P> 
<H3> 自 由 买卖 <STRONG>2080</STRONG> 自由 买卖 ! </H3> 
</DIV><! 网 站 介绍 部 分 DIV 结束 - -> 


. </DIV><! 网 页 头 部 分 DIV 结束 - -> 


在 上 述 代码 的 第 2 行 里 ， 使 用 CSS 的 方式 引入 了 蓝 色 长 条 ， 随 后 ， 在 第 3 行 里 ， 通 过 DIV 
的 方式 定义 了 网 站 的 Logo 图 片 ， 在 第 4~9 行 里 ， 定 义 了 导航 菜单 部 分 的 DIV， 而 在 第 10~17 行 
里 ， 定 义 了 网 站 介绍 部 分 的 DIV， 这 里 ”自由 买卖 ”的 文字 是 标题 ， 所 以 采用 H2 标 签 处 理 ， 
而 一 些 描述 性 的 文字 ， 则 使 用 P 标 签 的 方式 实现 。 


CA 搭建 导航 部 分 的 DIV 


按照 前 文 的 思路 ， 我 们 还 是 用 DIV 的 方式 构建 首 

页 导航 部 分 的 DIV， 这 部 分 的 效果 如 图 29-4 所 示 ， 它 

包括 “网 站 导航 ，、 友情 链接 、 收藏 排行 和 
用 户 登 录 “部 分 的 四 块 DIV。 


网 站 导航 部 
分 的 DIV 


图 29-4 首页 网 站 导航 部 分 DIV 效果 图 
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这 部 分 关键 实现 代码 如 下 所 示 。 


1. <DIV id="sidebar "> 

学 <DIV id="navigationmain"> <!--- 网 站 导航 部 分 的 DIV- -> 

3 <H2> 网 站 导航 </H2> 

4 省 略 导航 链接 代码 

0 </DIV> 

6 <!-- -网 站 友情 链接 部 分 的 DIV- -> 

这 <DIV style= "width:180px; margin:0autoO0 auto;"> 

8. 省 略 友 情 链接 部 分 的 代码 

9 </DIV> 

10> <XDIV> 

11. <DIV id="navigationfeatures"> <!--- 收 藏 排行 部 分 的 DIV- -> 
12. ”<H2> 收 藏 排行 </H2> 

le 省 略 收藏 排行 部 分 的 代码 

14. </DIV> 

15. <DIV id="userlogin"> <!--- 登 录 部 分 的 DIV- -> 

16. ”<H2> 用 户 登 录 </H2> 

过 <FORM id=formlogin action=/user/login/ method=post> 


18: <DIV> 

19 . <INPUT class=hidden type=hidden value=login name=action> 
20: <INPUT id=username name=username> 

2 <LABEL for=username> 用 户 名 </LABEL> 

4 <INPUT id=password type=password name=password> 

235 <LABEL for=password> 密 码 </LABEL> 


2 省 略 其 他 部 分 的 代码 
25: </FORM> 

26. </DIV> 

27 <DIV> 


从 上 面 代 码 中 可 以 看 出 ， 导 航 部 分 包含 四 个 DIV， 其 中 第 2~5 行 包含 了 网 站 导航 部 分 的 
DIV， 第 7~9 行 包含 了 友情 链接 部 分 的 DIV， 第 11~14 行 包含 了 收藏 部 分 的 DIV 代 码 ， 第 15~26 
行 包含 了 用 户 注册 登录 部 分 的 DIV。 


FEN 搭建 ”用 户 博客 ”部 分 的 DIV 


本 小 节 我 们 把 注意 力 放 在 如 何 构建 用 户 博客 部 分 DIV 上 ， 代 码 部 分 就 不 再 分 析 。 
用 户 博客 部 分 使 用 一 个 大 的 DIV 嵌 套 两 个 DIV， 其 效果 如 图 29-5 所 示 。 
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疏 天 更 遇 搭建 产品 展示 部 分 的 DIV 
产品 展示 部 分 的 效果 如 图 29-6 所 示 ， 其 中 也 是 采用 外 层 DIV 嵌 套 内 层 DIV 的 方式 实现 。 


IrcL 液 晶 电视 


图 29-5 用 户 博客 部 分 的 效果 图 29-6 产品 展示 部 分 的 效果 
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CE 搭建 页 脚 的 DIV 


首页 页 脚 部 分 的 DIV 效 果 如 图 29-7 所 示 ， 它 也 是 采用 外 


层 DIV 踪 套 内 


层 DIV 的 方式 实现 。 


日 自由 买卖 2010 


图 29-7 页 脚 部 分 的 DIV 


它 的 实现 代码 比较 简单 ， 请 大 家 在 阅读 的 时 候 注意 其 中 的 说 套 关系 ， 代 码 如 下 所 示 。 


DIV id=footer> 
<DIV id=footertopbg></DIV> 


<DIV id=navigationfooter> 
<UL> 
<LI> 免 费 订阅 <A href="#rss/">RSS</A></LI> 


</UL> 

8 </DIV> 
0. <DIV id=footerbottombg></DIV> 
1. </DIV> 


四 于 首页 CSS 效 果 分 析 


<DIV id=copyright>9 <Ahref="mailto:#"> 自 由 买卖 </A> 2010 </DIV> 


<LI> 相 关 <a href= "#"> 法 律 条 款 </a>， 本 公司 保留 应 有 的 一 切 权 利 。</LI> 


这 个 章节 中 ， 我 们 将 通过 表格 的 形式 ， 描 述 出 首页 中 DIV 使 
型 的 CSS 效 果 ， 我 们 将 只 给 出 一 次 ， 如 表 29-2 所 示 。 


表 29-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
CSS 描 述 和 关键 代码 


的 CSS 效 果 ， 对 于 同 种 类 


<DIV id=container> 


首页 头 加 入 一 个 蓝 色 的 图 标 


#container { 


BACKGROUND-IMAGE: 
url(../image/top.jpg); 


} 


<DIV id=header> 定义 首页 导航 部 分 的 高 度 与 宽度 
#header { 
WIDTH: 851px:; 


HEIGHT: 168px 
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( 续 表 ) 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<DIV id="logo"> 这 里 是 网 站 logo 
#logo { 


background-image:url(../image/ 


logo.jpg); 


} 


<DIV id="navigationheader"> 


<DIV id="sidebar"> 


网 站 上 边 导 航 栏 加 入 一 个 背景 图 片 
#navigationheader { 


background-image:url(../image/ EE 


top_bg:jpg); 


给 网 站 左边 导航 栏 定义 宽度 ， 并 设 
置 此 导航 栏 上 不 允许 出 现任 何 浮动 
元 票 

#sidebar { 


CLEAR: left; 
WIDTH: 198px; 


} 
<DIV id="contentsectionleft"> ”| 设置 用 户 博客 DIV 宽 度 ， 并 设置 头 背 
景 图 片 


#contentsectionleft { 


background-image:url(../image/ 


right_02.jpg); 
WIDTH: 198px; 


} 


<DIV class=" designpreview > 
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定义 产品 译 细 DIV 的 宽度 并 对 产品 
的 文字 说 明 做 了 处 理 ， 防 止 文字 过 
长 导致 DIV 变 形 


.designpreview { 


WIDTH: 140px: 
POSITION: relative 
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29.3 ”利用 CSS 样 式 完善 首页 效果 


CSS 的 作用 是 统一 风格 ， 在 前 一 节 我 们 已 经 完成 了 构建 页 面 的 DIV 层 ， 本 节 介绍 如 何 通 
过 CSS 优 化 首页 的 风格 。 


《CE 整体 布局 


首页 的 CSS 定 义 在 default.css 文 件 里 ， 我 们 需要 在 其 中 的 BODY 部 分 进行 整体 布局 ， 
BODY 部 分 的 代码 如 下 所 示 。 


Wo 

2 PADDING-RIGHT: Opx; 

3 background- image :url(../image/body_bg .jpg): /* 定 义 背 景 图 片 */ 
4. BACKGROUND-POSITION: center top; 

5 PADDING-LEFT: Opx; /* 定 义 左边 距 */ 

6 PADDING-BOTTOM: Opx ; /* 定 义 顶 边 距 */ 

人 MARGIN: Opx; /* 定义 外 边 距 */ 
8 PADDING-TOP: Opx; 

9 BACKGROUND- REPEAT: repeat-y; /* 定 义 图 片 拉 伸 方 式 */ 
10: FONT-FAMILY: arial ,宋体 ; /* 定 义 字 体 */ 

Wl font-size:12px; /* 定 义 字体 大 小 */ 
Ua BACKGROUND-COLOR: #f4f4f4; /* 定 义 背 景 颜 色 */ 


通过 上 述 代码 ， 我 们 定义 了 首页 的 样式 ， 在 第 3 行 设 置 了 背景 图 片 ， 在 第 9 行 设置 了 背景 
图 片 的 拉 伸 方式 ， 在 第 5~8 行 定义 了 首页 的 边框 和 各 边 距 ， 在 第 10~11 行 定义 了 首页 字体 和 字 
体 大 小 。 


天 殉 定 义 其 他 样式 


在 定义 首页 的 样式 代码 中 ， 通 过 如 下 的 代码 定义 了 H2 标 签 的 样式 ， 定 义 后 ， 所 有 H2 格 式 
的 文字 都 将 是 大 小 为 1.4em， 颜 色 为 机 34343 的 效果 ， 代 码 如 下 所 示 。 

2 

2 FONT-SIZE: 1.4em; /* 定 义 字体 大 小 */ 

35 COLOR: #434343 /* 定 义 字体 颜色 */ 

a 

首页 中 用 到 的 其 他 CSS 样 式 都 不 复杂 ， 这 里 就 不 再 重复 说 明了 ， 大 家 可 以 参考 与 本 书 配 
套 的 下 载 资源 中 的 相关 代码 。 
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29.4 ”商品 展示 页 面 


建 DIV， 而 只 介绍 如 何 开 发 商品 展示 页 面 的 特色 效果 。 


于 一 些 DIV 布 局 和 CSS 引 入 等 知识 点 在 前 文 里 已 经 叙述 过 ， 所 以 本 节 不 再 分 析 如 何 构 


在 这 个 页 面 上 我 们 需要 实现 如 下 的 特色 : 第 一 ， 用 大 图 分 页 的 效果 展示 商品 ， 这 个 可 以 


通过 DIV 布 局 的 方式 实现 ， 第 二 ， 当 鼠标 移动 到 商品 图 片上 时 ， 需 要 


如 图 29-8 所 示 ， 这 里 我 们 就 需要 用 CSS 的 方式 来 实现 。 


日 
选中 能 出 现 醒目 边框 效果 
LG 液晶 电 视 TCL 波 品 电 视 夏普 液晶 电视 
Q ai 要 QQ 吉 甘 下 2 
起 评论 数 局 评论 数 总 评论 到 
图 29-8 CSS 效 果 展 示 


用 DIV 层 构建 分 页 效果 
商品 分 页 的 效果 如 图 29-9 所 示 。 


图 29-9 商品 展示 页 面 分 页 的 效果 
实现 这 个 效果 的 关键 代码 如 下 所 示 。 


1. <DIV id="pager "> 

汉 <UL> 

3 <! 这 里 省 略图 片 的 链接 - -> 

4. <LI><A class=currentpage href="#">1</A> </LI> 
入 <LI><A href="#">2</A> </LI> 

6 <LI><A href="#">3</A> </LI> 

7 <LI><SPAN>.. .</SPAN> </LI> 
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3 <LI><A href="#">130</A> </LI> 

9. <LI><Ahref="#">Next »</A> </LI> 

10= </ULS> 

11. <DIV id=results>( 1-6 of 2080 产 品 ) </DIV> 
12-<ADIV> 


这 里 第 4 行 用 到 了 一 个 名 为 currentpage 的 CSS， 用 来 规范 页 码 的 格式 。 


用 CSS 构 建 商品 图 片 的 效果 


为 了 实现 当 鼠 标 移动 到 图 片上 时 图 片 加 上 边框 的 效果 ， 我 们 可 以 这 样 做 : 
第 一 步 ， 在 页 面 上 放置 图 片 ， 并 引入 CSS 效 果 ， 代 码 如 下 所 示 。 


1. <DIV class=designpreview id=id3684> 

2. <A class=dpview title=View href="#"><IMG height=90 alt="" src="image/ 
item04.jpg" width=120></A> 

3. <H3><A title="ViewWebDesignTemplate" href="#">LG 液 晶 电视 </A></H3> 

4. <H4><A class=dpavatar title="View User Profile" href="#"><IMG height=16 
alt="User Avatar" src="image/avatar_small .gif" width=16></A> 

5. <Aclass=dpprofile title="ViewUser Profile" href="#"> 查 看 全 图 </A> </H4> 


我 们 可 以 看 到 ， 第 4 行 通过 class=dpavatar 语 句 ， 引 入 了 一 个 CSS。 
第 二 步 ， 定 义 如 下 CSS， 关 键 代码 如 下 所 示 。 


1. .designpreviewH4A.dpavatar:visited { /* 定 义 链接 访问 后 的 样式 */ 
2 

让 

4. .designpreviewH4A.dpavatar:active{ /* 定 义 链接 点 击 时 样式 */ 
全 

SF 

7. .designpreviewH4A.dpavatar :hover { /#* 定 义 鼠 标 悬 浮 在 链接 上 的 样式 */ 
8 . BORDER-RIGHT: #5d5d5d 1px solid;， 

9. BORDER-TOP: #5d5d5d lpx solid; 

10. BORDER-LEFT : #5d5d5d lpx solid.; 

UL BORDER- BOTTOM: #5d5d5d lpx sol id 

| 

13. .designpreviewH4 A.dpavatar IMG {/* 定 义 图 片 显 示 的 样式 */ 

14. BORDER-TOP-WIDTH: Opx: 

45: PADDING-RIGHT: Opx; 

16. PADDING-LEFT: Opx; 

Ms BORDER-LEFT-WIDTH: Opx: 

18. BORDER- BOTTOM-WIDTH: Opx; 

19 . PADDING-BOTTOM: Opx:; 

20: MARGIN: lpx:; 

2 PADDING_TOP: Opx: 

2 BORDER-RIGHT-WIDTH: Opx 

D0 


上 面 第 13 行 定义 图 片 效 果 的 样式 ， 第 14~19 行 定义 了 边框 的 宽度 全 部 为 0， 而 且 没 有 颜 
色 。 而 第 7~12 行 定义 鼠标 悬浮 在 链接 上 的 样式 ， 第 8~11 行 指定 了 边框 的 宽度 为 1jpx、 边 框 的 
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颜色 为 #5d5d5d， 这 样 我 们 就 实现 了 鼠标 悬浮 的 效果 。 


29.5 ”站 点 地 图 页 面 


在 站 点 地 图 页 面 中 ， 需 要 实现 如 下 的 效果 : 当 用 鼠标 移动 到 不 同 的 页 面 时 ， 页 面 说 明 里 
将 动态 地 显示 各 个 小 页 面 的 介绍 ， 如 图 29-10 所 示 。 这 个 效果 将 通过 CSS 的 方式 来 实现 。 


页 面 说 明 页 面 


关于 我 们 I 


介绍 我 们 网 站 的 发 展 历史 和 
来 目标 


在 页 面 里 ， 我 们 孔 标 移动 到 不 
同 的 导航 页 ， 页 面 说 明 里 将 
态 显示 该 导航 页 的 说 明 内 容 


图 29-10 动态 显示 文字 的 效果 
这 个 效果 的 关键 实现 代码 如 下 所 示 。 


1. <DIV id=content> 

2 <DIV id=contentsectionleft> 
3 <H2> 页 面 说 明 </H2> 

4. <DIV id=summary> 

De <H3> 有 什么 作用 ? </H3> 

[a <P> 告 诉 你 该 页 面 的 功能 ， 页 面 中 所 展示 的 内 容 的 简介 。</P> 
Ts </DIV> 

2 </DIV> 

9. <DIV id=contentsectionright> 
L105 <DIV id=pages> 

WIE <H2> 页 面 </H2> 


3 <UL style="PADDING-BOTTOM: 10px"> 

1 <LI><A onmouseover="p(' 首 页 '，' 首页， 是 网 站 的 主要 页 面 ， 进 入 网 站 时 所 看 到 的 第 
一 个 页 面 ')”href="index.htm"> 首 页 /</A> 

14. <UL> 

Lss <LI><A onmouseover="p(' 关 于 我 们 '，' 介绍 我 们 网 站 的 发 展 历史 和 未 来 目标 ' ) " 
href="aboutus .htm"> 关 于 我 们 /</A> 

163 省 略 类 似 的 代码 

5 </UL> 

Le </DIV> 

i195 <DIV> 

20. </DIV> 


il 第 29 章 简洁 的 购物 网 站 


请 大 家 注意 第 13 行 和 第 15 行 中 包含 在 fi 标签 中 的 代码 ， 如 <A onmouseover="p( 关 于 我 们 ', 
介绍 我 们 网 站 的 发 展 历史 和 未 来 目标 )"”href="aboutus.htm"> 关 于 我 们 /</A>， 这 段 代码 是 实现 
效果 的 关键 ， 其 中 ， 除 了 用 href 标 签 定义 超 链 接 页 面 外 ， 还 用 了 onmouseover 语 句 定义 鼠标 移 
动 到 链接 上 面 时 该 调用 JavaScript 里 的 p 方 法 。 


P 方 法 的 代码 如 下 所 示 。 

1. functionp(title, summary) 

il 

3 document .getElementById( summary ) .innerHTML = 
</h3><p>" + summary+ </p>"; 

和 

其 中 ， 通 过 第 3 行 的 innerHtml 标 记 ， 动 态 地 设置 小 页 面 的 说 明文 字 。 


<h3>" + title + 
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个 人 图 片 博客 网 站 


在 互联 网 异常 发 达 的 今天 ， 每 个 人 可 以 通过 博客 网 站 ， 来 向 自己 的 亲朋 
好 友 展 示 自 己 的 风采 。 个 人 博客 的 内 容 可 以 是 非 正 式 的 ， 而 且 ， 可 以 用 一 些 
非 正规 的 方式 来 彰显 自己 的 个 性 。 本 章 我 们 将 介绍 一 个 典型 而 又 美观 的 个 人 
博客 网 站 实现 方法 。 


30.1 网 站 页 面 效果 分 析 


博客 网 站 属于 个 人 网 站 ， 这 种 网 站 的 风格 是 要 突出 个 性 ， 所 以 这 类 网 站 不 仅 要 用 色彩 突 
出 个 性 ， 而 且 图 片 来 吸引 别人 的 眼球 。 

本 章 中 介绍 的 博客 网 站 包含 了 样式 丰富 的 首页 、 使 用 多 张 图 片 ” 集 中 又 炸 ”访问 者 眼球 
的 ”图片 展示 页面， 以 及 ”博客 文章 ”页面 。 

本 章 将 着 重 分 析 首 页 、 图 片 展示 “页面 的 设计 样式 ， 而 ”博客 文章 ”页 面 ， 虽 然 效果 
非常 个 性 化 ， 但 实现 起 来 相对 简单 ， 所 以 本 章 就 不 再 分 析 ， 这 部 分 代码 请 大 家 自行 从 与 本 书 
配套 的 下 载 资源 中 获取 。 

@ 呈 和 首页 效果 分 析 

博客 网 站 的 首页 效果 如 图 30-1 所 示 ， 它 使 用 了 三 行 的 布局 样式 。 在 第 一 行 里 ， 放 置 
我 介绍 ”的 内 容 ， 使 用 了 能 收缩 放 开 的 效果 。 第 二 行 是 首页 的 主体 部 分 ， 这 块 分 为 三 列 ， 分 
别 放置 了 导航 最 新 发 表 的 博客 和 广告 图 片 ” 模 块 ， 在 第 三 行 里 ， 放 置 博客 网 站 
的 页 脚 ， 其 中 包含 版 权 等 信息 。 

首页 的 背景 ， 是 一 张 带 白 蓝 色 底 的 图 片 ， 上 面 有 些 浅 浅 的 图 案 。 使 用 不 同 颜色 背景 图 片 
的 方式 ， 能 很 鲜明 地 突出 博 主 的 性 格 ， 比 如 这 里 的 蓝 色 能 显示 出 博 主 的 神秘 ， 如 果 用 艳丽 型 
的 配色 ， 则 能 体现 出 博 主 阳光 灿烂 的 性 格 。 


站 
CO 
OO 
> 
> 

网 


图 片 博客 网 站 


能 展开 搜索 的 第 一 
行 ， 里 面 放 "自我 
介绍 "和 * 留 下 邮 
箱 "等 内 容 


第 二 行 ， 放 主体 内 容 


最 新 发 表 的 博客 


Mickel 


放 版 权 
信息 等 内 容 


图 30-1 首页 的 效果 图 


图 片 展示 页 面 的 效果 分 析 


图 片 展 示 页 面 的 样式 与 首页 一 样 ， 也 是 采用 三 行 样式 ， 第 一 行 和 第 三 行 与 首页 完全 
样 ， 效 果 如 图 30-2 所 示 ， 图 中 通过 ”展开 /收缩 ”按钮 ， 把 第 一 行 收缩 起 来 了 。 
第 二 行 的 左边 部 分 与 首页 一 样 ， 也 放置 了 导航 部 分 的 链接 ， 而 右边 部 分 是 本 博客 的 特 
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色 : 个 很 大 的 篇 幅 绘制 了 很 多 张 图 片 ， 这 里 如 果 用 JavaScript 加 入 一 些 图 片 的 特效 ， 就 能 
更 吸引 访问 者 ， 不 过 这 个 特效 不 是 本 章 的 重点 ， 所 以 就 不 再 详细 介绍 了 。 


图 


30-2 图 片 展示 页 面 的 效果 图 


人 EN 网 站 文件 综述 


在 这 个 网 站 中 ， 除 了 上 文 里 提 到 的 首页 和 图 片 展 示 页 面 外 ， 还 包括 ”博客 文章 


这 些 页 面 中 所 用 到 图 片 、CSS 文 件 和 JavaScript 代 码 ， 将 分 别 放置 在 image、css 和 js 目录 里 ， 文 
件 及 其 功能 如 表 30-1 所 示 。 


习 
回 
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表 30-1 图 片 网 站 文件 和 目录 一 览 


模块 名 文件 名 功能 描述 
页 面 文件 index.htm 首页 
picshow.html 图 片 展示 页 面 
blog.html 博客 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文 件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
images 目 录 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


30.2 ”规划 首页 的 布局 


设计 这 类 网 站 的 基本 方法 是 : 先 用 DIV 构建 总 体 框架 ， 随 后 再 细 分 各 个 模块 地 效果 ， 最 
后 用 CSS 和 JS 实现 动态 的 效果 。 


ki 殉 坝 国 搭 建 首页 第 一 行 的 DIV 


首页 采用 三 行 的 样式 ， 第 一 行 是 博客 主人 的 自我 介绍 和 博客 主人 的 联系 方法 ， 它 采用 了 
多 个 DIV 嵌 套 的 样式 ， 其 效果 如 图 30-3 所 示 。 


介绍 下 邮箱 
正文 部 分 DIV 自我 请 留 下 邮箱 
最 


oo 时 gg 


图 30-3 首页 第 一 行 的 DIV 设计 分 析 图 


这 个 模块 中 包含 了 多 个 DIV， 此 部 分 DIV 实现 的 代码 如 下 所 示 。 


1. <divclass=" mailing_box"> 

这 <div class=" inner_mailbox"> 

S| <div id="social_right"> 

4 <h2 class="socialize_hdr hdr "> 自我 介绍 </h2> 

号 <p><img src=" a gif" border="0" class="social_avatar" /> 在 
人 爱好 的 带 引 下 ， 入 校 我 便 参 加 了 校 书画 协会 .</p> 
6. 


<ulclass="]left_links"> 


@、 |DIV+CSS 网 站 布局 案例 梢 裕 (第 2 版 ) 


<1i><strong> 人 生 旅 程 </strong> &mdash; 活 了 这 么 久 才 知道 自己 要 <a href="#"> 
干什么 </a></1i> 

8. 

9. </ul> 


0 </div> 

1 <div id="mail_left"> 

2 <h2 class="maillist_hdr hdr "> 欢迎 光临 </h2> 

SS <p> 这 里 是 我 的 博客 ， 想 要 联系 我 的 话 可 以 留 下 邮箱 地 址 哦 。</p> 

4 <formmethod= eosin 

局 <input types "text" name="address” size="28” value= "填写 邮箱 " 


onfocus="if (this.value==' 填写 邮箱 ') this.value='':;" onblur="if(this.value=="'') 
this .value=' 填 写 邮 箱 ' ;" class="text_input" /> 

6- <input De "submit" value= "提交 "name= "submit" class="mail_button" 
/> 

7. br /> 

8. </form> 

9. </div> 

20. <divclass="clear"></div> 

Zl /iv 

22. </div> 


上 述 代 码 中 ， 第 1 行 的 代码 定义 包 在 最 外 面 的 DIV， 并 且 在 CSS 中 设置 为 默认 不 显示 ， 
Re 展开 / 收 起 ”按钮 后 才 会 显示 或 隐藏 ， 第 2 行 包 含 正 文 的 DIV， 而 第 3~11 行 是 正 
文 的 左边 列 ， 第 13~19 行 则 是 正文 的 右边 列 。 


搭建 首页 主体 部 分 的 DIV 


儿 
下 < 了 1 
开 部 
半 洁 


最 新 发 表 的 博客 


于 几 屯 
3 口 


? 江 
六 
法 
一 
CD 
一 
心 
孕 


示 ， 我 们 就 来 逐 
构建 主体 部 分 的 
DIV。 


建 
主体 部 分 第 一 行 的 
DIV， 这 里 关键 部 分 
的 代码 如 下 所 示 ， 
代码 比较 简单 ， 所 
以 不 做 说 明了 。 


网 


网 


30-4 首页 主体 部 分 的 DIV 设 计 分 析 
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1. <div id="header"> 

2 <hl1><a href=" index .html"> 我 的 L0G0</a> <! 一 网 站 Logo --> 
3 <ahref="#" class="tag"> 看 看 </a></hl> <! 个 性 说 明 - -> 
4. </div> 


第 二 ， 构 建 主体 部 分 第 2 行 的 DIV， 这 部 分 的 内 容 较 多 ， 我 们 展开 说 明 。 
左边 部 分 DIV 是 网 站 导航 部 分 ， 关 键 实现 代码 如 下 所 示 ， 这 里 使 用 ul 和 li 等 控制 段落 的 元 
素来 布局 导航 文字 。 


le <divs 

2. <ul id="nav'"> 

攻 消 <li id="home"><ahref="index.html”class="selected"> 首 页 </a></1i> 

4. <1li id="artwork"><a href="picshow.html"><strong></strong> 图 片 展示 </ 
a></1i> 

5 <1i id="store"><a href="#"> 创 作 交 流 </a></1i> 

6 <li id="blog"><a href="blog.html "> 博客 </a></1i> 

党 <1li id="info"><a href="#"> 联 系 我 </a></1i> 

8 </ul> 

9. </div> 


中 间 部 分 DIV 是 最 新 发 表 的 博客 ， 现 在 放置 了 6 条 博客 信息 ， 放 置 的 条 数 可 以 自行 定义 ， 
关键 实现 代码 如 下 所 示 。 


1. <div id="center_well"class="narrow_center "> 

2 <h2 class="recent_posts_hdr"><a href="#"> 最 新 发 表 >></a></h2> 
号 <ul class= "recent_posts "> 

4. <1i> 

5 <div class="date"> 发 布 日 期 : 2009.3.31</div> 

6 <h3><a href="#"> 今 天 我 下 班 时 发 生 一 件 诡异 的 事 </a></h3> 

7 


<divclass="entry"> 


8. <p> 今 天 下 班 了 ， 天 空 赚 腾 肛 。 突 然 &hellip; <a href="#" rel="bookmark" 
class="comment_link" > 评论 数 :2</a></p> 

Ye </div> 

10. </1i> 

TH 省 略 这 模块 的 其 他 代码 

2 

13- </ul> 

14. </div> 


在 上 面 代码 中 ， 为 了 节省 篇 幅 只 给 出 一 条 博客 信息 作为 例子 ， 如 有 需要 请 从 与 本 书 配 套 
的 下 载 资源 中 获取 详细 代码 ， 并 可 根据 需要 修改 代码 。 

这 里 请 注意 ， 在 第 1 行 里 我 们 引入 了 class 为 narrow_center 的 CSS， 这 部 分 的 关键 代码 如 下 
所 示 ， 它 定义 了 这 个 DIV 的 宽度 和 背景 图 片 等 信息 。 


1 .narrow_center { 

2 width:400px; <! 设置 DIV 的 宽度 --> 

3 margin:0 20px 00; <!-- 设置 右边 距 --> 

4 padding-right :60px; <!-- 设置 右 内 边 距 - -> 

5 background:url(../images/rt_bk.gif) repeat-y 100% -20px; <!-- 设置 背 
景 图 片 -> 

Br 
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右边 DIV 的 实现 分 为 两 个 部 分 ， 上 面部 分 是 广告 区 域 ， 下 面部 分 是 最 新 评论 区 域 ， 关 键 
实现 代码 如 下 所 示 。 

1. <divid="left"> 

es <!-- 广告 区 域 代码 -> 

3 <div id= "twitter "> 

4. <h2 class="recent_tweets_hdr "> 广告 标题 </h2> 

Ss <p><img src=" images/fms .jpg" border="0" /></p> 

[: 全 <ahref="#" class="fol1ow"> 收 藏 我 的 博客 </a> 

和 </div> 

8. <!-- 最 新 评论 区 域 代码 - -> 

9 <h2 class="recent_art_hdr”><p> 最 新 评论 <span style="margin- 


left :20px;font-size:12px"> 更 多 &gt ;&gt ;</span></p></h2> 

0 <ul class="recent_art"> 
1 <l1i><ahref="#" rel="4226628850" title=""> 
忆 <img border="0" src="images/4226628850_04leffff78_s.jpg" /></a> 
3 <div class="date">12.29.09</div> 
4. <h3><a href="#" title=""> 天 使 MM</a></h3> 
5. <p> 不 错 的 博客 ， 来 踩 踩 ~~ &hellip;</p> 
6 A RE 
吕 省 略 部 分 评论 代码 
8 
9. </ul> 

20. </div> 

请 注意 上 面 代 码 的 第 11~16 行 ， 它 只 包含 了 一 个 最 新 的 评论 ， 如 果 需 要 多 显示 几 个 评 


论 ， 那 就 请 把 评论 都 包含 在 ii 这 个 标签 内 。 
到 此 为 止 ， 我 们 已 经 给 出 了 第 二 行 里 DIV 的 主要 代码 ， 这 里 我 们 忽略 了 一 些 次 要 DIV 的 
代码 ， 这 些 代码 可 以 到 与 本 书 配 套 的 下 载 资源 中 获取 。 


搭建 页 脚 部 分 的 DIV 


片 网 站 的 页 脚 部 分 比较 简单 ， 大 致 的 效果 如 


| 
区 | 


这 个 30-5 所 示 。 


区 


30-5 页 脚 部 分 的 DIV 设计 


实现 页 脚 部 分 的 代码 如 下 所 示 。 


1. <div id= "footer "> 


2 <P>&copy; Copyright 2010 - <a href=" index .html"> 保 留 一 切 权利 </a>&nbsp; &nb 
spi&nbsp:&nbsp:&nbsp;&nbsp : 

区 <ahref="#”class="feed "> 发 表 RSS</a><span class="stats"> (81)</ 
span> 

4. &nbsp; &nbsp;<a href-="#" class-"feed"> 订 阅 RSS</a><span 
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class="stats"> 
2 </span> &nbsp; &nbsp:;<a href="#" class="dellink"> 已 收藏 </a><span 
class="stats"> 
6. (<ahref="#" class="statslink">357 次 </a>)</span></p> 


Te /dtv> 


到 这 里 首页 的 搭建 工作 就 完成 了 ， 要 注意 的 是 ， 因 
义 文字 颜色 的 时 候 ， 不 能 与 背景 


为 整个 页 夯 


都 使 


了 背景 ， 所 以 在 定 


图 片 的 颜色 相似 。 


首页 CSS 效 果 分 析 


在 前 在 


描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 我 们 将 


描述 首页 中 其 他 CSS 的 效果 ， 如 表 30-2 所 示 。 


表 30-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


表格 的 形式 


DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<div class="mailing_| 用 背景 图 片 被 拉 伸 的 方式 制造 出 阴影 ? 
box"> 果 
.mailing_box { 
display:none; 
margin:0 0 10px 0; 
padding:20px 20px 20px 160px:; 
background:url(../images/art_ 
bk.gif); 
} 
<a href="”# "| 定义 这 个 图 标 鼠 标 停留 和 鼠标 离开 是 的 


class= "buyart"></a> 


效果 
.a.buyart { 


background:url(../images/buyart. 
gif) 0 -52px; 
} 
a:hover.buyart { 
background:url(../images/buyart. 
gif) 0 0; 


} 
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( 续 表 ) 


DIV 代 码 CSS 描 述 和 关键 代码 效果 图 
<div id="center_well" | 在 一 个 DIV 中 同时 定义 了 ID 和 CLASS 双重 
class="narrow_center"> | CSS， 以 此 来 定位 这 个 DIV 


#center_well { 


float:left; 
7 定义 双 划 CSS 来 定 
.narrow_center { 位 这 个 DIV 
width:400px; 
margin:0 20px 0 0; 


padding-right:60px; 
background:url(../images/rt_ 
bk.gif) repeat-y 100% -20px; 
上 
<ul class="recent_art"> | 用 符合 网 站 风格 的 背景 图 片 来 做 行 分 隔 
符 


.recent_art li { 
clear:left; 
margin:18px 0 0 0; 


符合 网 站 风 
padding:0 0 24px 0; E | 


min-height:80px; 


background:url(../images/line_ 
bk.gif) no-repeat 0 100%; 
} 


30.3 ”首页 CSS 效 果 分 析 


在 首页 中 我 们 使 用 CSS 实 现 了 两 个 亮点 效果 ，DIV 阴 影 效果 和 图 标 悬 浮 的 动态 效果 。 


DIV 阴影 效果 的 实现 方式 


DIV 阴影 效果 是 ， 在 此 DIV 显示 时 ，DIV 内 部 会 出 现 阴影 ， 如 果 不 使 用 DIV 覆盖 ， 此 阴影 
会 一 直 存在 ， 效 果 如 图 30-6 所 示 。 
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图 30-6 DIV 阴 影 效 果 的 示意 图 


为 了 实现 DIV 阴影 的 效果 ， 首 先 需要 在 这 部 分 的 DIV 引入 CSS 样 式 ， 关 键 代 码 如 下 所 示 。 


1. <divclass="mailing_box"> 

人 <div class="inner_mailbox"> 

全 <div id="mail_left"> 

用 <h2 class="maillist_hdr hdr"> 欢 迎 光临 </h2> 

5 <p> 这 里 是 我 的 博客 ， 想 要 联系 我 的 话 可 以 留 下 邮箱 地 址 哦 。</p> 
6 这 里 省 略 部 分 代码 

VW 

8. </div> 

9. <div> 


在 上 面 代码 中 ， 第 一 行 引 用 的 CSS 为 mailing_box， 这 使 得 整个 DIV 都 有 了 阴影 背景 ， 如 
果 不 使 用 DIV 进行 覆盖 ， 此 阴影 效果 将 一 直 存 在 。 
其 CSS 实 现代 码 如 下 所 示 。 


1. .mailing_box{ 

2 display :none; 

35 margin:00 10px 0; 

4. padding: 20px 20px 20px 160px ; 

5S. background:url(../images/art_bk.gif); 
Be) 


上 述 代 码 中 ， 第 2 行 说 明 这 个 DIV 是 默认 不 显示 的 ， 只 有 当 点 击 ”展开 / 收 起 ”按钮 时 才 
会 显示 或 隐藏 ， 这 部 分 效果 是 由 JavaScript 实 现 的 ， 这 里 就 不 做 详细 说 明了 。 
在 这 部 分 代码 中 ， 其 中 第 4 行 代 码 定义 了 覆盖 阴影 效果 DIV 位 置 ， 其 顺序 是 上 右 下 
左 ， 左 边 定义 的 留 白 最 大 ， 所 以 阴影 效果 就 最 多 ， 如 图 30-6 所 示 。 

而 第 5 行 代码 引用 了 一 张 图 片 作为 背景 图 ， 并 且 不 对 它 的 拉 伸 效 果 做 任何 限制 ， 所 以 才 
会 出 现 DIV 阴 影 的 效果 。 


天 殉 图 标 悬 浮 效果 


在 首页 中 有 ”欢迎 光临 ”这 个 小 图 标 ， 它 游离 于 整个 DIV 之 外 ， 并 且 当 鼠标 停留 和 鼠标 
移 开 时 会 有 不 同 的 效果 ， 如 图 30-7 所 示 。 
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全 


网 


30-7 小 图 标 悬 浮 于 动态 效果 示意 图 


鼠标 停留 效果 


小 图 标 悬 浮 效果 页 面 实现 方式 很 简单 ， 主 要 是 通过 CSS 引 用 的 方式 来 实现 的 ， 其 实现 代 
码 如 下 所 示 。 


<ahref="#" class="buyart"></a> 


这 里 


了 鼠标 停留 和 移 开 时 的 动态 效果 ， 实 现代 码 如 下 所 示 。 
<1-- 鼠标 离开 效果 ， 并 定义 了 小 图 标 悬 浮 属性 - -> 


<! 定义 绝对 位 置 -> 


主要 就 是 引用 了 一 个 名 叫 buyart 的 CSS， 这 个 CSS 实 现 了 小 图 标的 悬浮 效果 ， 也 实现 


background:url(../images/buyart .gif) 0 -52px; 
text-indent : -10000px; <! 设置 文本 缩 进 -> 


background:ur1l(../images/buyart .gif) 00; 


<!-- 不 显示 超过 对 象 尺寸 的 内 容 - -> 


述 代 码 中 ， 首 先 第 2 行 和 第 3 行 定 义 了 这 个 小 图 标的 宽度 与 高 度 ， 并 且 因 为 动态 切换 


1 
2. a.buyart { 
3 width:83px; 
4. height :52px; 
RS position: absolute; 
6 right:15px; 
FE top: 15px; 
8. 
9. 
10. overflow:hidden; 
ble 
12. <!-- 鼠标 停留 效果 - -> 
13. a:hover .buyart { 
14. 
15. } 
在 上 
效果 是 
在 第 8 行 中 引用 了 要 切换 的 


行 中 就 定义 了 -52px 这 个 属 


下 面 
position: absolute; ， 这 个 属性 定义 了 
后 ， 这 个 小 图 标 就 变 为 浮动 图 标 了 ， 只 要 


图 片 ， 因 


为 小 图 标 默认 显示 的 是 图 


张 图 片 完 成 的 ， 所 以 小 图 标的 高 度 只 能 是 这 张 图 片 的 一 半 。 


片 的 下 半 部 分 ， 所 以 在 第 8 


， 这 与 前 文 是 不 同 的 ， 大 家 要 注意 一 下 。 


我 们 就 来 介绍 小 图 标的 悬浮 效果 ， 在 这 个 效果 中 ， 最 重要 的 属性 是 第 5 行 的 
这 个 <a> 标 签 的 位 置 属于 绝对 位 置 ， 定 义 这 个 属性 之 


定义 距离 边框 的 大 小 就 行 了 ， 如 第 6、 第 7 行 定义 


了 距离 右边 框 15 个 像素 、 距 离 顶 边框 15 个 像素 ， 这 样 这 个 小 图 标 就 显示 在 右上 角 ， 如 果 想 改 
变 显 示 位 置 ， 则 可 以 通过 调整 像素 大 小 来 实现 。 


30.4 


展示 页 面 使 用 7 列 缩 略 


图 片 展 示 页 面 


多 显示 ， 


不 同 于 相册 ， 这 种 风格 


来 表现 博客 的 个 性 化 ， 如 
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图 


30-8 所 示 。 
设计 图 片 展示 区 的 布局 应 当 考 虑 ， 用 户 可 能 上 传 多 张 图 片 ， 图 片 必须 控制 其 宽度 和 高 


度 ， 每 张 图 片 的 外 边 距 margin 设 置 为 一 定 宽度 ， 让 所 有 的 图 片 看 起 来 整齐 有 序 。 


图 片 列 表 的 布局 


图 30-8 图 片 展示 页 面 的 效果 图 


图 中 红线 为 thumbs DIV 的 父 类 容器 ，a 结 合 img 标 签 是 最 常用 的 图 片 链 接 方式 ， 对 初学 者 


来 说 ， 很 容易 忽视 图 片 的 表 框 问题 。 图 片 中 看 到 的 白色 边框 是 img 的 border。 请 注意 img 和 a 组 
合 时 ， 图 片 默认 有 边框 。 必 须 将 img 的 border 设 置 为 0， 才 能 去 掉 边框 ， 以 下 是 图 片 展示 区 的 


实现 代码 。 


<div id="thumbs "> 
<ahref="#" title=""> 


<img border="0" src="images/4226628850_041leffff78_s.jpg" /> 
</a> 


<img border="0" src="images/3960817116_7e8ebOcf5b_s.jpg" /> 
</a> 


ti 
2 
3 
4. 
5. <ahref="#" title="img_art"> 
6. 
人 
8. </div> 


上 面 代码 中 第 5 行 包含 title 的 语句 ， 很 多 初学 者 在 开发 页 面 的 时 候 经 常 忽略 title 和 alt 这 些 


描述 文字 的 属性 。 它 们 的 作用 是 描述 某 段 文字 或 图 片 是 什么 、 做 什么 用 途 。 其 实 它们 还 有 第 


二 个 作用 ， 增 加 搜索 引擎 的 收录 率 。 


搜索 引擎 是 无 法 解释 图 片 的 。 而 图 片 展示 页 以 图 片 为 主 ， 即 如 何 让 搜索 引擎 更 好 地 收录 


呢 ? 这 时 就 要 靠 title 和 alt 属 性 来 说 明 。 虽 然 这 种 标准 不 会 带 来 明显 的 作用 ， 作 为 标准 我 们 还 


= 


引 
上， 


#thumbs img { 


1 

号 border :2px solid #FFF; //2 个 像素 点 白色 实 线 边 框 

3 margin:0 9px 6px 0; // 外 边 距 下 边 是 9 像素 宽度 ， 左 边 6 像素 宽度 
< 

5. #thumbs img:hover { 

6 border :2px solid #365463; // 2 像素 并 且 指 定 颜 色 的 实 线 边框 
7 

上 


面 代码 的 第 1 行 里 ，#thumbs img 表 示 id= "thumbs "的 标签 内 所 有 img 的 样式 。 而 第 2 行 
为 img 标 签 定义 了 边框 和 外 边 距 。 
在 第 5 行 里 ， 我 们 在 #humbs img 后 面 增加 :hover， 这 样 ，hover 就 能 定义 鼠标 移 到 img 上 时 


的 样式 规则 。 
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30.5 ”博客 文章 页 面 


博客 文章 页 面 文章 部 分 的 DIV 


博客 文章 页 面 的 文章 部 分 包括 的 内 容 
比较 多 ， 其 效果 如 图 30-9 所 示 ， 这 里 我 们 首 
先 讲解 标题 和 正文 的 实现 方式 。 

图 中 红线 框 起 来 的 文章 区 域 的 父 类 
容器 ， 包 含 了 文章 的 标题 、 正 文 、 发 布 


和 红 旺 部 分 是 文章 容器 包括 标 
题 、 正 文 、 详 细 信 息 和 评论 


dircenter mei 期 、 评 论 次 数 、 浏 览 次 数 、 外 部 引用 、 评 
本 论 信息 和 发 布 评论 等 内 容 ， 其 现实 代码 如 
下 所 示 。 


图 30-9 博客 文章 上 半 部 分 标题 和 正文 


1. <div id="center_well" class="narrow_center"> 
2. ”<h3 class="single"> 夜 过 乱 坟 地 谁 给 老 鬼 引 的 路 </h3> 
3. <divclass="entry "> 
4. <P> 那 时 农民 还 忙 着 庄稼 活 ， 戏 一 般 是 喝 过 茶 后 开始 ， 半 夜里 结束 。 老 鬼 光棍 一 条 ， 地 里 又 没 
有 多 少 活 做 ， 常 常 深夜 归来 一 睡 到 昨 午 。 // 上 略 </p> 
5 <p> 发 表 日 期 : 2010.2.15 <br /> 
6 


~ 


: 评论 数 : 2 次 <br /> 
由 浏览 &nbsp;&nbsp; : 31 次 <br /> //&nbsp ;以 开始 的 分 号 结尾 的 作为 标记 解释 


8 引用 : <ahref= "#"> 引 用 网 址 </a> </p> 
9 </div> 

10. <1--// 省 略 评论 部 分 //--> 

lL <xdiv> 


文章 内 容 的 现实 比较 简单 ， 标 题 和 正文 都 使 用 了 h3 和 div 标 签 ，CSS 部 分 的 代码 如 下 所 示 。 


1. #center_well {float :1eft;} /* 浮动 方式 : 左 */ 

2 .narrow_center {width:400px;margin:0 20px 00; 

3 padding-right :60px; /* 右 内 边 距 60 像 素 */ 

4. background:url(./images/rt_bk.gif) repeat-y 100% -20px; 
5 /* 设 背景 图 并 纵向 拉 伸 ， 这 里 百分比 和 -20 在 下 面 会 有 解释 */ 
8. 
于 
8 
9 


上 

/* // 以 上 父 类 容器 的 样式 规则 */ 

h3 {font :normal 13px/20px "宋体 ", sans-serif; 
margin:002px 0; /* h3 外 边 距 左边 2 像素 */ 
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padding:0; 
| 
. h3.single {font :normal 16px/16px "宋体 ", sans-serif: 
margin:00 10px 0; /* 标题 外 边 距 左边 10 像 素 */ 
padding:0; 


= 

. /* 以 上 文章 标题 样式 */ 

.entry {margin: 00 15px 0;} /* 外 边 距 左边 15 像 素 */ 

8. .entry p {margin-top:0;color :#9EE4F5;} /* 外 边 距 顶部 空白 ， 段 落 内 字体 颜色 
#9EE4F5*V/ 

9. .entrypa{fcolor:#9baabl;border-bottom:1pxdotted#566a75;} 

20. .entrypa:hover {color:#fff; 


omwn 一 口 


2 border-bottom: lpx dot ted #fff; 
2 /* 正 文 段落 内 锚 点 选中 时 字体 颜色 白色 底 边 1px 白 色 点 线 */ 
23.]} 


上 面 第 1 行 的 代码 中 ， 我 们 把 #center_well 设 置 为 浮动 式 ， 这 样 做 的 目的 是 让 left 所 在 的 
DIV 并 排 在 其 后 面 。 在 第 2 行 里 ， 设 置 了 center_well 宽 度 为 400 像 素 、 下 边 距 为 20 像 素 ， 目 的 是 
让 文章 下 容 与 文章 区 分 开 。 

第 3 行 设置 右 内 边 距 空 60 个 像素 ， 为 了 给 图 片 预 留 足 够 的 位 置 。 那 么 图 片 在 什么 位 置 
昵 ?” 图 30-10 中 白色 区 域 就 是 一 张 图 片 。 这 是 一 种 高 级 设计 技巧 ， 很 多 设计 师 使 用 这 种 技巧 对 
网 页 的 区 域内 部 进行 美化 ， 我 们 把 它 称 为 组 合 效 果 。 


搜索 


按时 间 分 类 


图 30-10 repeater-y 背 景 图 定位 效果 


在 上 述 代码 的 第 4 行 里 ， background:url(./images/rt_bk.gif) repeat-y 100% -20px; 这 人 句 


代码 对 白色 图 片 的 位 置 进行 定位 并 纵向 拉 升 为 最 终 效果 。 绿 色 区 域 是 图 片 的 背景 图 区 域 ， 
repeater-y 属 性 对 其 进行 平 铺 并 纵向 拉 升 。 而 100% -20px 语 句 才 是 关键 ，100% 是 在 下 图 位 置 ， 
平 铺 高 度 是 DIV 高 度 ， 所 以 会 出 现 一 条 一 条 波浪 的 效果 ; -20px 表 示 图 片上 移 20 个 像素 点 。 
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博客 文章 页 面 归档 和 分 类 部 分 的 DIV 


开发 博客 系统 有 一 些 标准 ， 比 如 归档 、 分 类 、 统 计 、 引 用 、 通 告 、RSS 等 数 十 条 标准 ， 
我 们 可 以 在 各 种 类 型 的 博客 上 见 到 他 们 的 身影 。 在 本 章 的 例子 中 我 们 可 以 看 到 图 30-11 所 示 的 
归档 和 统计 ， 这 也 是 我 们 日 常设 计 博 客 界面 时 需要 用 到 的 模块 。 


按时 间 分 类 


图 30-11 归档 分 类 效果 


这 部 分 的 关键 实现 代码 如 下 所 示 。 


<div id="left"> 


1 

2 <h2 class="search_hdr hdr "> 搜索 </h2> 

3 <div id="search_form"><1--// 搜 索 略 --></div> 

4 <h2 class="archive_hdr hdr "> 按时 间 分 类 </h2> 

5 <ul> 
6 <1i><ahref= '#' title='March 2009'>2009 年 3 月 </a></1i> 
学 <!--// 略 --> 
8 </ul> 
9. <h2 class="cat_hdr hdr "> 文章 分 类 </h2> 

0. <I--// 略 -=-> 

大 <ul> 

ES <li class="cat-item cat-item-5"><a href="#" title="Viewall posts fled 

under Contests"> 讨 论 </a> (2) </1i> 
3 </ul> 


在 上 面 代码 的 第 2 行 中 ， 使 用 h2 作 为 标 头 ， 而 在 第 5、6 行 里 ， 使 用 ul 和 1i 实 现 列表 ， 之 前 
对 这 种 标签 进行 过 介绍 ， 这 里 不 做 过 多 说 明 。 


h2.archive_hdr { 


号 background:url(../images/archive_hdr .gif) no-repeat; /* 设置 背景 图 ， 
不 拉 升 */ 
< width:170px; 
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height:17px: 
margin:50px 0 10px 0; /* 右 外 边 距 50 像 素 */ 
} 
#1left { float: left; width:250px; padding- 1eft :10px; } /* 左 浮动 */ 
#1left a {color :#9baabl;} 
#1eft a:hover {color:#fff; } 


/* ------ 以 上 锚 点 样式 ---------- 雪 鸡 
. ul {margin:0; padding:0;} 
.li{style-list:none;} 


. // 源 代码 中 最 上 面 定义 的 ， 先 用 样式 统一 好 ul 和 1i 的 样式 


在 上 面 样式 代码 中 对 archive_hdr h2 进 行 了 定义 ， 并 对 left 内 的 锚 点 定义 了 宽度 、 浮 动 方 
式 、 颜 色 和 选中 的 颜色 。 在 第 11 行 里 ，ul 和 1i 在 CSS 开 始 就 已 经 统一 了 标签 的 样式 ， 我 们 经 常 
会 看 到 像 第 11 行 这 样 的 *{margin:0;padding:0;} 样 式 定义 。 
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